[THEME] ZSPIN - Rainbow

[zaker]

Bonjour, je reviens vers vous vers un nouveau thème default pour la HFS Box Sp. Pour le moment j'ai simplement effectué une ébauche graphique du thème. Je vais commencer à faire le développement d'ici peu. Je cherche encore des idées pour ajouter de la nouveauté, comme :

- de la vidéo en arrière plan avec une transparence alpha qui permettrai d'avoir des anims graphique sur le thème un petit plus, je cherche encore comment gérer le truc.
- Je regarde d'un peu plus près le css filterlab pour gérer les médias et faire des effets sympa sur les images et vidéos. ( à vérifier mais je crois que pour le moment le dev de ce truc a été abandonné )



A bientôt.

Mise à jour : 29/10/2015 :

Le lien avec les fichiers si vous voulez tester : http://www.3dlim.fr/zspin/rainbow/Theme_rainbow.zip" onclick="window.open(this.href);return false;

Juste besoin de placer les repertoires dans votre dossier HFSbox et çà roule. J'ai laissé le backup des thémes par défaut si vous voulez revenir en arrière.

Bon jeux !

[Odissine]

Pour la vidéo en transparence j'ai essayé et ça fonctionne comme une image ^^ Alpha, Blur, ... bref tout y passe
En tout cas super sympa l'interface Curieux de voir comment tu animes tout ça ou si c'est juste de l'affichage fixe ?

[zaker]

Je pense plus à un truc du genre :

http://codepen.io/gibson/pen/PPjdMR" onclick="window.open(this.href);return false;

http://codepen.io/declandewet/pen/aivLf" onclick="window.open(this.href);return false;

http://stackoverflow.com/questions/5055 ... ml5-canvas" onclick="window.open(this.href);return false;

Je veux faire de l'incrustation enfaite, comme avec un fond vert.

Une info super intéréssante pour ce que j'ai envie de faire, voici un lien :

http://updates.html5rocks.com/2013/07/A ... rome-video" onclick="window.open(this.href);return false;

Apparement dans chrome canary il est possible d'importer des vidéos au format WebM avec une couche Alpha, que le naviguateur peut prendre en compte.

Pour ceux qui ont chrome canary, voici le flag à activer : --enable-vp8-alpha-playback

d'autres infos sur le même sujet : http://stackoverflow.com/questions/5055 ... ml5-canvas" onclick="window.open(this.href);return false; // https://jakearchibald.com/scratch/alphavid/" onclick="window.open(this.href);return false;

un autre lien : http://www.sciencelifeny.com/transparen ... rency.html#" onclick="window.open(this.href);return false;

Question pour VIK : Est-ce que tu penses quand dans Zspin je peux intégrer une vidéo WEBM VP8 avec une couche alpha ?.

[Odissine]

J'avoue que j'ai du mal a imaginer J'attends de voir !! Mais je te fais confiance

[Porko]

Le theme déchire^^
Ca change vraiment

Comme odissine hate de voir les anims!

[zaker]

[BBvideo 560,340][/BBvideo]

Un début d'anim ! La suite plus tard.

[himura95]

Sympa j'aime bien le rendu

[Porko]

Cool l'anim!

En fond c'est une vidéo? Je te demandes ça car il y a un exemple threejs avec un fond en particule qui est bien léger et tu peux changer facilement les image

[zaker]

Porko : Oui effectivement c'est une vidéo, en 2560*1440. J'ai fais la réalisation sous after effect. Je voulais tester l'intégration vidéo pour du thème. Sauf que pour le moment j ai pas les outils que je souhaitais avoir. Je suis donc un peu déçus. En plus avec du recul c'est inexploitable. Ça me fais une vidéo de 60 mo dans la finalité pour 1min, elle peut être mise en loop. Je vais stopper les recherches vidéos pour l'instant le temps que je n'aurai pas les outils adaptés. Il faut juste que notre ami Google se bouge les fesses .

- Je vais attendre le support du VP8 VP9 avec support d'un canal alpha pour les vidéos. Ça se base sur un encodage en H265, mis dans un container mkv. Et je pense que la les vidéos seront plus légère pour les sites internet et ZSPIN pour la même occaz.

[Porko]

Ok tu l'as fais avec GWD

Simon mates ça http://threejs.org/examples/#webgl_points_sprites en final l'insérer dans le code comme fond
En changeant les sprites et les quelques réglages d'anim, ça serait super léger par rapport à une video... Surtout avec la resolution de la mort que tu as mis

[lankou910]

Oui effectivement c'est une vidéo, en 2560*1440

enfin un theme a la reso de mon ecran ^^

[zaker]

Une petite mise à jour concernant le théme :

- Intégration d'animation en CSS sur le logo ZSPIN
- Intégration de la météo dans le théme avec tamtéo, c'est simple et efficace.
- Intégration de nouvelle animation dans le fichier animate.css ( j'ai commenté le fichier avec les nouvelles anims )
- Intégration d'une animation avec des cercles sur le logo HFS en CSS ( Edit : maintenant ils sont responsive )
- Adaptation du bezel de la vidéo en fonction de la vidéo ( tate / yoko ) en javascript ( merci odissine, j'ai récup ton code et je l'ai adapté à mes besoins )
- Intégration de l heure en javascript
- intégration des animations pour le thème, fini l'image photoshop lol.

Work in progress :

- Je dois encore créer la wheel.json
- Créer les images pour la wheel
- créer les thémes defaut par systéme.

Encore un peu de taff!!


Une image du théme :



Pour ceux qui veulent voir le théme en liveaction avec un bezel cave :

http://3dlim.fr/zspin/rainbow/" onclick="window.open(this.href);return false;

bezel 5/4 :

http://3dlim.fr/zspin/rainbow/bezel5_4/" onclick="window.open(this.href);return false;

N'oubliez pas de faire F11 sur votre clavier pour l'avoir en fullscreen et de le regarde avec chrome ! sinon vous avez pas les anims!.

bon jeux !

[Porko]

Clap, clap clap!

[NiNaCa]

Effectivement très joli. j'adore le design
Les anims marchent aussi sous Firefox.

[zaker]

Une petite vidéo du thème avec la wheel :

[BBvideo 560,340][/BBvideo]

- intégration des logos pour les systèmes
- intégration de la wheel
- intégration d'un script sup pour mieux gérer les tailles des fichiers vidéos avec le bezel.
- suppression de la météo pour le moment.

Je vais mettre les sources en téléchargement d'ici peu. Je le mettrai en première page du post.

voila !

[locmazzo]

Génial, c'est vraiment cool bordel !

[zaker]

Fichiers Disponible en téléchargement en première page.

[Porko]

je teste ça demain! Je te ferai un retours

[zaker]

ok pas de soucis porko Merci!

[Porko]

J'ai testé, et c'est bien propre!
Clean, rapide et élégant.

Par contre je me perd un peu avec la wheel, même si je comprends la logique du design le fait que la selection soit au dessus du reste des wheels choque mon cortex parietal...
J'ai pas de solution à te proposer... Peut être les 3 wheels du dessus plus haut?


Mais pour l'ensemble ça claque bien