Effet d'ondulation sur texte et/ou image

Soyez le premier à donner votre avis sur cette source.

Vue 20 379 fois - Téléchargée 1 843 fois

Description

Bonjour à tous... TRILOGIE Episode II

Il s'agit cette fois ici de jouer avec des Images et/ou du texte afin d'obtenir un effet d'ondulation.

Le principe de base est toujours des plus simple, on divise l'image, en fait le <DIV> construit avec une Image ou/et du Texte, et on s'amuse avec chaque morceau, dans cette source on utilise un découpage en ligne afin de faire onduler l'ensemble.
L'effet est obtenu grace au calcul d'un table Sinus qui nous permet de décaler les offset en Y de chaque <DIV>...

Pour plus d'information il vous suffit de jeter un coup d'oeil au fichier HTM et JS...

Mise en garde : cela peut devenir très gourmant en ressource surtout si le images sont grosses

Compatibilté : Testé sous FireFox, IE, Netscape et Opéra...

Conclusion :


Je reste bien évidement à votre disposition...
Quelques effets amusants, donc qui ne servent à rien font partie des sources..

;0)

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
3426
Date d'inscription
lundi 26 décembre 2005
Statut
Membre
Dernière intervention
14 janvier 2011
16
Bonjour,

Le principe de base est de créer au départ autant de
identiques que la hauteur du DIV d'origine, regardes la barre d'info sous le titre au début, pour un DIV de 100px de haut on crée donc 100 DIV identiques, c'est pour cela que c'est gourmand.

Une fois que l'on a tous les DIVs on utilise la propriétée clip des DIV pour ne faire apparaître qu'une partie de ceux ci
exemple : "rect( 0px, 100px, 1px, 0px)" ne montre que 100px de large et 1px de haut.
...donc pour les 10 DIVs...
le 1st on montre la première ligne
le 2nd on montre la deuxième ligne
...etc...
Ensuite on en fait ce que l'on veut en jouant sur la position en X et en Y...
Plein d'effets peuvent donc être réalisés...

A toi de jouer et BONNE PROG
;0)
Messages postés
94
Date d'inscription
lundi 8 août 2005
Statut
Membre
Dernière intervention
13 juin 2012

ouah je suis bleufé.. avec du javascript..

j'ai suis pas sur d'avoir compris le principe..
le

permet de definir un bloque..
bon, on affiche une image dans ce bloque

<img src="image.jpg"


et ensuite on redefinis la taille de ce bloque.. c cela le principe?
Messages postés
170
Date d'inscription
jeudi 21 octobre 2004
Statut
Membre
Dernière intervention
9 janvier 2008

Je vais finir par mettre toutes les conceptions de Petole Team dans tous mes sites ! C'est une fois de plus très impressionant!
Messages postés
450
Date d'inscription
samedi 16 avril 2005
Statut
Membre
Dernière intervention
18 avril 2007
2
Non, exclusif msie 4.0 minimum, là je dois reconnaitre qu'il marque un point.
Messages postés
81
Date d'inscription
mercredi 7 juillet 2004
Statut
Membre
Dernière intervention
1 octobre 2007
1
C sur que c plus simple :) Mais simple curiosité ? Cette méthode fonctione avec tous les navigateurs ?
Afficher les 6 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.