Twitter iPhone pliant OnePlus 11 PS5 Disney+ Orange Livebox Windows 11

body background changeant

15 réponses
Avatar
Stéphane Santon
Bonjour,

Sur certains site "modernes" (mais je n'arrive plus à mettre la souris
dessus...), il y a en page d'accueil plusieurs articles pleine largeur,
dont l'un apparaît avec une image de fond fixe, avec une trame
semi-transparente sous le texte. Donc quand on scrolle, effet sympa.
Jusque là je vois bien une background-image avec attachment:fixed, et
les articles avec fond uni sauf un.

Mais surtout, certains proposent le même effet de fond fixe quelques
articles plus loin sur la même page, mais avec une image différente...
Que s'est-il passé ? Je ne vois pas comment ça se passerait en pur CSS.
Avec du JS j'imagine que lorsque le n-ième article arrive dans le
visuel on change l'image de fond.

Alors... pur CSS ?
Ou bien Javascript (et donc exemple de code ?) ?

Merci


--
Stéphane
BTS Electrotechnique *** http://www.bts-electrotechnique.fr
En alternance : http://www.ufa-palissy.fr
Domotique : http://www.ecodomotique.fr

10 réponses

1 2
Avatar
Stéphane Santon
Voilààaaa !...

J'ai retrouvé l'effet :
http://pixelcog.github.io/parallax.js/

J'y regarde...

Stéphane Santon a écrit :
Mais surtout, certains proposent le même effet de fond fixe quelques articles
plus loin sur la même page, mais avec une image différente...
Que s'est-il passé ? Je ne vois pas comment ça se passerait en pur CSS.
Avec du JS j'imagine que lorsque le n-ième article arrive dans le visuel on
change l'image de fond.

Alors... pur CSS ?
Ou bien Javascript (et donc exemple de code ?) ?



--
Stéphane
BTS Electrotechnique *** http://www.bts-electrotechnique.fr
En alternance : http://www.ufa-palissy.fr
Domotique : http://www.ecodomotique.fr
Avatar
SAM
Le 07/03/16 16:33, Stéphane Santon a écrit :

Mais surtout, certains proposent le même effet de fond fixe quelques
articles plus loin sur la même page, mais avec une image différente...
Que s'est-il passé ? Je ne vois pas comment ça se passerait en pur CSS.



c'est très facile :
<http://stephane.moriaux.pagesperso-orange.fr/truc/fonds_mouvants&gt;



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 07/03/16 17:17, Stéphane Santon a écrit :

J'ai retrouvé l'effet :
http://pixelcog.github.io/parallax.js/

Stéphane Santon a écrit :
Mais surtout, certains proposent le même effet de fond fixe quelques
articles plus loin sur la même page,





avais-je bien compris cette histoire d’articles ?



Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
Stéphane Santon
Bonsoir,

SAM a écrit :
Mais surtout, certains proposent le même effet de fond fixe quelques
articles plus loin sur la même page, mais avec une image différente...
Que s'est-il passé ? Je ne vois pas comment ça se passerait en pur CSS.



c'est très facile :
<http://stephane.moriaux.pagesperso-orange.fr/truc/fonds_mouvants&gt;



Ah ouais, pas mal, rien qu'en CSS... Bravo.

Avec le JS, les fonds décalent à une vitesse différente, c'est un effet
en plus.
Mais déjà en CSS pur ça donne bien.

Merci :-)

Bonne soirée !

--
Stéphane
BTS Electrotechnique *** http://www.bts-electrotechnique.fr
En alternance : http://www.ufa-palissy.fr
Domotique : http://www.ecodomotique.fr
Avatar
docanski
SAM a écrit le 07/03/16 19:16 :

c'est très facile :
<http://stephane.moriaux.pagesperso-orange.fr/truc/fonds_mouvants&gt;



Marche pas avec Iceweasel (équivalent de Firefox mais totalement libre
de scripts propriétaires) sous Debian Linux : pas la moindre réaction.
Au passage, salut Steph ! ;-)

Cordialement,
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
docanski
docanski a écrit le 08/03/16 10:22 :
SAM a écrit le 07/03/16 19:16 :

c'est très facile :
<http://stephane.moriaux.pagesperso-orange.fr/truc/fonds_mouvants&gt;



Marche pas avec Iceweasel (équivalent de Firefox mais totalement libre
de scripts propriétaires) sous Debian Linux : pas la moindre réaction.
Au passage, salut Steph ! ;-)

Cordialement,



Ni sur Chromium, ni sur Opera, ni sur Arora, ni sur Qupzilla ...
toujours sous Debian.
--
docanski

Portail et annuaire du nord-Bretagne : http://armorance.free.fr/
Guide des champignons d'Europe : http://mycorance.free.fr/
La vallée de la Rance maritime : http://valderance.free.fr/
Les côtes du nord de la Bretagne : http://docarmor.free.fr/
Avatar
Sergio
Le 08/03/2016 14:14, docanski a écrit :

c'est très facile :
<http://stephane.moriaux.pagesperso-orange.fr/truc/fonds_mouvants&gt;



Marche pas avec Iceweasel (équivalent de Firefox mais totalement libre
de scripts propriétaires) sous Debian Linux : pas la moindre réaction.
Au passage, salut Steph ! ;-)

Cordialement,



Ni sur Chromium, ni sur Opera, ni sur Arora, ni sur Qupzilla ... toujours sous Debian.



Chez moi, LinuxMint même rendu sous Firefox, Midori (0.4.3), Opera (12.16) et Chrome. Ça semble marcher (même si j'ai pas trop
compris ce qu'il cherche à faire).

--
Serge http://leserged.online.fr/
Mon blog: http://cahierdesergio.free.fr/
Soutenez le libre: http://www.framasoft.org
Avatar
Olivier Miakinen
Le 08/03/2016 10:22, docanski a écrit :

c'est très facile :
<http://stephane.moriaux.pagesperso-orange.fr/truc/fonds_mouvants&gt;



Marche pas avec Iceweasel (équivalent de Firefox mais totalement libre
de scripts propriétaires) sous Debian Linux : pas la moindre réaction.
Au passage, salut Steph ! ;-)



Pour moi, ça fonctionne très bien avec SeaMonkey, que ce soit sur
Windows ou sur Linux Ubuntu. Mais peut-être ne sommes-nous pas
d'accord sur ce que c'est censé faire ?

Alors voilà ce que j'observe.

Dans le cadre en haut à gauche, il y a quatre parties de « lorem
ipsum », chacune précédée d'un titre (de titre 1 à titre 4). Quand
on fait défiler le texte grâce à l'ascenseur vertical, on voit que
derrière chacune des parties le fond est fixe par rapport à la page,
mais que lorsque l'on passe d'une partie à une autre ce fond change.
Ce serait d'ailleurs plus évident pour les parties paires si l'image
n'était pas si uniforme.

--
Olivier Miakinen

« Au fond, diviser par zéro revient à unifier la Mécanique Quantique
et la Relativité Générale. » -- M.A. le 7/3/2016 dans fr.sci.maths
Avatar
SAM
Le 08/03/16 23:10, Olivier Miakinen a écrit :
Ce serait d'ailleurs plus évident pour les parties paires si l'image
n'était pas si uniforme.



J'ai changé cette image
hop !
<http://stephane.moriaux.pagesperso-orange.fr/truc/fonds_mouvants&gt;

Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
Avatar
SAM
Le 08/03/16 10:22, docanski a écrit :
SAM a écrit le 07/03/16 19:16 :

c'est très facile :
<http://stephane.moriaux.pagesperso-orange.fr/truc/fonds_mouvants&gt;



Marche pas avec Iceweasel (équivalent de Firefox mais totalement libre
de scripts propriétaires) sous Debian Linux : pas la moindre réaction.



Ça me parait très curieux ....
Ce n'est apparemment pas très compliqué comme "effet"

sous Mac OS X 10.6.8 (plus supporté par Apple)
Safari.5 OK
Opera 12.10 OK
Chrome Version 48.0.2564.116 (64-bit) OK

Faudra que j'essaie sous Win.7 ...


Au passage, salut Steph ! ;-)



Salut camarade ;-)


Cordialement,
--
Stéphane Moriaux avec/with iMac-intel 27" & Mac OS X 10.6.8
1 2