begin process at 2012 05 28 13:45:18
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Effets

 > EFFET D'ONDULATION SUR TEXTE ET/OU IMAGE

EFFET D'ONDULATION SUR TEXTE ET/OU IMAGE


 Information sur la source

Note :
10 / 10 - par 2 personnes
10,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Effets Classé sous :ondulation, effet, texte, image Niveau :Débutant Date de création :26/06/2006 Vu / téléchargé :16 286 / 1 518
Auteur : PetoleTeam

Ecrire un message privé
Ce membre participe au partage de revenus publicitaires
Commentaire sur cette source (6)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
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)

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Sources du même auteur

Source avec Zip CLEAR D'UN INPUT FILE
Source avec Zip FONCTION ALERT ET LES ACCENTS
Source avec Zip LECTURE ET RÉCUPÉRATION DES LIGNES D'UN FICHIER TEXTE
Source avec Zip Source avec une capture RECHERCHE ET COLORISATION, MISE EN SURBRILLANCE
Source avec Zip DIV QUI SUIT LE SCROLLING DE LA PAGE
Toutes les sources de PetoleTeam

 Sources de la même categorie

Source avec Zip Source avec une capture BOUTON ROTATIF par kazma
Source avec Zip Source avec une capture SHOWMAPAREA par phidelum
DHTML IE FILTRE DÉGRADÉ (OUTIL HTML POUR DÉVELOPPEUR) par internetdev
Source avec Zip ANIMATION DU TEXTE par brennal
Source avec Zip Source avec une capture EFFET RAYONS DU SOLEIL par tefa24600
Toutes les sources de la catégorie Effets

 Sources en rapport avec celle ci

Source avec Zip MOOLOUPE - EFFET DE LOUPE VIA LE FRAMEWORK MOOTOOLS par Miky76
Source avec Zip Source avec une capture EFFET D'EXPLOSION SUR TEXTE ET/OU IMAGE par PetoleTeam
Source avec Zip Source avec une capture EFFET DE DRAPEAU SUR TEXTE ET/OU IMAGE par PetoleTeam
Source avec Zip INFOS BULLE PERSONNALISÉES par abdelaziz_info
Source avec Zip Source avec une capture EFFET DE VAGUE SUR DU TEXTE (HORIZONTAL / VERTICAL) par jerms

Commentaires et avis

Commentaire de stfou le 26/06/2006 19:29:33

pour ça, ya plus simple :

<div id="div" style="filter:Wave(freq=2, light=20, phase=0, strength=6"><img src="image.bmp"></div>

<script>
i=0;
setInterval('if(i<100){document.getElementById("div").filters.wave.phase=i;i++}else{i=0}',1);
</script>

voilà

Commentaire de josh666 le 26/06/2006 22:37:58

C sur que c plus simple :) Mais simple curiosité ? Cette méthode fonctione avec tous les navigateurs ?

Commentaire de stfou le 27/06/2006 09:16:47

Non, exclusif msie 4.0 minimum, là je dois reconnaitre qu'il marque un point.

Commentaire de johann1 le 27/06/2006 20:03:00

Je vais finir par mettre toutes les conceptions de Petole Team dans tous mes sites ! C'est une fois de plus très impressionant!

Commentaire de Mastronic le 08/12/2006 22:05:56

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

j'ai suis pas sur d'avoir compris le principe..
le <DIV> </DIV> permet de definir un bloque..
bon, on affiche une image dans ce bloque
<DIV><img src="image.jpg"</DIV>

et ensuite on redefinis la taille de ce bloque.. c cela le principe?

Commentaire de PetoleTeam le 11/12/2006 16:42:33

Bonjour,

Le principe de base est de créer au départ autant de <DIV> 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)

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

faire défiler du texte et integrer un javascript sur une image [ par melane35 ] Bonjour, je suis toute nouvelle sur ce site et je réalise actuellement 1 site avec dreamweaver. J'ai quelques questions : il me semble qu'il est possi texte sur image [ par Filou07 ] Salut,J'ai mis un texte sur une image qui me sert de bouton avec un changement de couleur du bouton au passage de la souris. Ca marche mais le texte d Effet de texte [ par romain2boss ] Salut,je suis pas un fan de javascript, et je cherche de puis un bon bout de temps un script de défilement de texte qui fasse un peu comme l'intro de Problème d'affichage en HTML [ par mouniersophie ] Bonjour a tous,je débute dans cette programmation et j'essaye d'afficher un texte suivie d'une image à un certain endroit de ma page comme suit :&lt;D Ajouter du texte a un champ texte depuis une image [ par eka808 ] Bonjour à tousVoila mon problèmeJe voudrais que le clic d'une image sur ma page ajoute du texte a un champ texte d'un formulaireMerci d'avance pour d' Lien image [ par jaco13 ] Bonjour!J'ai fait un lien dans ma navigation vers la page d'accueil non pas avec un texte mais&nbsp;avec une image! Il y a une fonction dans "propri&# Image qui agi sur un champ texte [ par sagaff ] Bonjours,J'aimerai que lorsque je clique sur une image ,ca agissent sur un champ texte.Je suis entrai nde faire un script de news, donc quand je cliqu affichage d'image avec onmouseover [ par Atorina ] Bonjour,J'aimerai afficher une image quand on passe sur un texte.Par exemple dans un talbeau, j'ai 2 colonnes.Dans la premiere je veux mettre du texte aide for rollover... pas en image ni en texte! [ par ayane ] Hello!J'm'adresse à vous parce que j'ai un petit problème... (sinon pourquoi posser un question me diriez-vous?) voilà, j'aurais bessoin d'un rollover Effet d'image survolée [ par JoJo738 ]


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

Photothèque

Photo Frau auf Feld mit KopfsalatPhoto Water in the Beginning of the Grand Canyon
Photo Colors of sea-life 

Visiter la photothèque

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,593 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)