Partage

Declencher un "hoover" par défilement

14 mars 2018 à 6:15:49

Hello ! Je voudrais savoir si il est possible, via CSS/HTML, de déclencher l'event :hoover (ou un équivalent) d'un élément, par le milieu de l'écran lors du défilement à la place du pointeur de la souris ?

L'idée c'est d'effectuer un changement sur un paragraphe (taille, couleur...) lorsque celui-ci est dans la zone ciblée, si on "scroll" il retourne à son état normal et le suivant change, et ainsi de suite... Avec la souris et l'event :hoover, pas de problème mais sans je ne sais même pas ou chercher... Je met le code pour que vous puissiez essayer, vous comprendrez mieux ce que je veux xD

Merci =)

le code HTML :

<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" href="style.css" />
		<title>Inner Devil</title>
	</head>
	
	<body>
		<div class="main">
		
			<div class="title">
				<span><strong>Inner Devil</strong></span>
			</div>
			
			<div class="reader">
				<div class="box">

<h1>Prologue : A brand new life… </h1> 

<p>
In a endless void, a soul was floating, flickering and pulsing with a ever decreasing force as on 
the verge of extinction. Drifting aimlessly through a unfathomable time, mindless with only darkness
 for compagnion, as if waiting to dissipate into nothingness. 
</p><P>
Suddenly trembling, like a last stubborn struggle against its fate, in a blazing and soundless bang…
</p><P>
A blinding light, a obnoxious pain, a chilling cold, followed by a heart wreaking scream… a ode to a new life,
 as a thunder clap celebrating the passing through the chasm of emptiness, 
 quickly drowned in warmth and softness, falling in a quiet and soundless slumber.
</p><P>
<i>I have reborn</i>, was the only thought in that fuzy consciouness before falling asleep.
The days and nights quickly succeeded, unable to seize its new world with his immature eyes, 
unable to keep a clear stream of thought, sleeping and eating as any newborns does.
</p><P>
… 
</p><P>
Its only bearings with the world was the clear and melodious voice of a woman, 
her scent and her softness, the sensible touch of a mother.
Coming and going, as a endless tide, that we never want to quit but always 
welcome with a cheering heart with only one meaning… <i>It’s milk time !</i>
</p><P>
<span class="dialog">« Look at him suck the milk as a little beast !</span> said the loud and rough voice of a man.
</br></br>
<span class="dialog">- Orgar, that mean our son is lively it’s definitly a good omen for him</span>, 
cut the clear and melodious voice of a woman while the baby was still drinking like crazy at her breast.
</br></br>
<span class="dialog">- Killa, have you choose a name ? Or i’ll call him little beast 
for the rest of his life</span>, jested Orgar while teasing its child.
</br></br>
<span class="dialog">- It’s Kaneth our second son from now on ! »</span> 
Told Killa while smilling wildly.
</p><P>
The Crescent family was a small and casual kind in the Jolt Mountain’s village, 
Orgar the father and Killa the mother. The childrens, Gebora the first daughter and Daran 
the first son with Kaneth being the last addition to the family.
</p><P>
… 
</p><P>
As months flew by, Kaneth was already a year old. Growing steadily with its mind becoming 
sharper by the days while recovering memories from its past life, impressing his family 
with his calmness and cleverness.
</p><P>
But today, that year old boy was seated on a beast hide on the floor, his eyes glinting with 
intelligence as if fully immersed in thought with a total concentration…
Suddenly showing a unyelding expression, placing both hand on the ground, raising its butt, 
pushing on its small arms and legs with a ‘Ah’ sound he rised and… ‘Bam’.
</p><P>
<i>Dammit !!! I failed again, why is it so hard to stand on two legs ?!</i> Feeling dejected 
by what should have been ‘a piece of cake’ for him, he kept trying again and again with an 
ever lowering mood. After an hour he could stand still a handfull second but the first step 
will inevitably lead him to kissing the ground.
</p><P>
Soon close to noon, his mother and sister were in the kitchen busy at preparing the meal 
while his father was out to work as a lumberjack and his brother at the teaching house, 
who should be coming home in no time. 
</p><P>
Trying again restlessly, while standing, his five years older brother stormed into the home 
shouting for meal. The abrupt opening of the door rised a gale that made Kaneth stagger and 
fall back on its butt, noticing his little brother, Daran couldn’t help to come tease him 
while waiting for the meal time.
</p><P>
With a loud cry, he made his sister who was twelve years old come to the rescue while his 
mother brought the meal at the table. He looked back, eyes full of scorn, at his older 
brother while eating its mashed vegetables, thinking… <i>Just you wait, in few months 
i’ll make you my mount !</i>
</p><P>
A few days later, while doing the laundry, Killa was startled by a weird sound coming from 
the main room. Rushing in, she saw Kaneth standing on its feet, hands on his hips, head high 
laughing to the ceiling.
</p><P>
Surprised by the arrival of his mother who was looking at him with big and round eyes he thought,
<i> I admit that pose must look quit awkward right now…</i> Trying to keep it natural he started walking, 
tottering a bit, hands extended saying ‘Mama’ trying to make a happy looking face hoping to cover the 
awkward situation. 
</p><P>
Recovering from her initial shock and noticing that her son had already covered half the distance, 
bending and extending both hands, with a silly and genuine smile of happiness from a mother who 
saw the first step of her child, she said ‘Come’. 
</br>Catched and hugged lovingly, he thought <span class="note"><i>Saiiiiiifuuuuu…</i><span>Safe in a japanese prononciation</span></span>
</p><P>
… 
</p><P>
As a reincarnated man in a child body days were boring, except few words to learn there and then, 
it was just boring, far from normal child for who, everyday is full of discovery. 
In its previous life he was a common man in its thirty, no wife, no children, a simple job in a 
factory with a basic education. 
</p><P>
In its boredom he will frequently remember its adult life back on Earth even if, in the end, 
she was quite dull it was plentiful. Thanks to Internet, he could have access to most of 
entertainment be it movie, music, literature, knowlegde, information and so on. Right now it 
didn’t even have a book, and even if, he probably couldn’t read it.
</p><P>
Reminiscing, in the end he couldn’t remember the last part of his life, can’t remember how he died. 
Its whole life was plain and dull as dullest and plain can be, without any sense of accomplishement left… 
he feeled like having wasted its previous life.
</br>
As a vow made to oneself, he swear in his heart... <i>This time, in this life, it’s all-out ! </i> 
</p><P>
Days, months and seasons flew by, daily life continued with nothing unexpected happening as years passing by. Three years after, Kaneth was four year old, the age to go to the teaching house. 
</p><P>
It was the start of a brand new life in a brand new world ! 
</p>



				</div>
			</div>
			
			<div class="foot">
				<div class="link">
					<p>	
						<span style="float:right;"><a href="01.html" title="If Exist !">Next<strong> >>></strong></a></span>
					</p>
				</div>
				<div class="tought">
					<img class="avatar" src="image/avatar.png" />
					<p>
						Hey, i'm Ekdahl ! Many Thanks to have read the very first chapter of my novel...</br>
						I really hope you liked it, in fact, i'm not a native english and it took me a lot to get thus far. 
						I'm pretty sure a lot of errors that remains there and then if you could give me a head-up i'll appreciate !</br>
	
					</p>
				</div>
				<div class="info">
					<p>
						<span style="float:left;"><strong>Author : Ekdahl</strong></span>
						<span style="float:right;"><strong>Date : 03/14/2018</strong></span>
					</p>
				</div>
			</div>


		</div>
	</body>
</html>

Et le CSS : (avec c'est plus jolie =)

body{
	background: url(image/i.jpg) no-repeat center center fixed; 
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

.main{
	position : absolute;
	left: 22%;
	right: 22%;
	top: 0px;
}

.box{
	background-color : rgba(10, 10, 10, 0.75);
	font-size : 1.1em;
	color : white;
	border-left : 15px solid rgba(10, 10, 10, 0.85);
	border-right : 15px solid rgba(10, 10, 10, 0.85);
	border-top : 1px solid black;
	border-bottom : 1px solid black;
	text-shadow : 0px 0px 8px blue;
}
.box p{
	padding-left : 20px;
	padding-right : 20px;
}
.reader p{
	margin-left : 50px;
	margin-right : 50px;
	padding : 10px;
	font-size : 1.2em;
	text-shadow : -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0px 0px 8px blue;
}
.reader i{
	color : white;
	text-shadow : -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0px 0px 8px green;
}
.reader p:hover {
	font-size : 1.5em;
	margin-left : 30px;
	margin-right : 30px;
	padding-bottom : 5px;
	text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0px 0px 8px DeepSkyBlue;
}
.title{
	margin-top: 0%;
	padding : 50px;
	text-align : center;
	font-size : 4em;
	color : white;
	background-color : rgba(10, 10, 10, 0.95);
	text-shadow : -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0px 0px 8px red;
}
.foot{
	margin-top : 0px;
	min-height : 250px;
	background-color : rgba(10, 10, 10, 0.75);
}
.link{
	height : 60px;
	padding : 20px;
	padding-top : 10px;
	font-size : 1.5em;
	background-color : rgba(10, 10, 10, 0.95);
}
.avatar{
	margin-top : 10px;
	margin-left : -40px;
	margin-right : 50px;
	height : 120px;
	width : 120px;
	float : left;
	border-radius : 20px 0px 20px 0px;
}
.tought{
	min-height : 140px;
	font-size : 1.3em;
	padding-left : 50px;
	padding-right : 50px;
	color : white;
	border-left : 15px solid rgba(10, 10, 10, 0.85);
	border-right : 15px solid rgba(10, 10, 10, 0.85);
	border-top : 1px solid black;
	border-bottom : 1px solid black;
	text-shadow : 0px 0px 8px blue;
}
.info{
	text-align : center;
	font-size : 1.5em;
	color : white;
	text-shadow : -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0px 0px 8px yellow;
	background-color : rgba(10, 10, 10, 0.95);
	min-height: 50px;
	padding-top: 20px;
	padding-left: 70px;
	padding-right: 100px;
	padding-bottom: 40px;
}

h1{
	text-align : left;
	margin : 70px;
	margin-bottom : 50px;
	margin-left : 25px;
	color : white;
	text-shadow : -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0px 0px 8px yellow;
}
h2{
	text-align : center;
	color : white;
	background-color : rgba(10, 10, 10, 0.75);
	text-shadow : 0px 0px 8px yellow;
}

a:visited{
	color: silver;
}
a{
	color : white;
	text-decoration : none;
	text-shadow : 0px 0px 8px green;
}
a:hover{
	text-decoration : underline;
	text-shadow : 0px 0px 8px red;
}


.dialog{
	color : white;
	text-shadow :  -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0px 0px 8px DarkGoldenRod;
}
.note{
	color : white;
	text-shadow :  -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0px 0px 8px red;
}
.note i{
	color : white;
	text-shadow :  -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, 0px 0px 8px red;
}
.note span{
	position: absolute;
	margin-top: 23px;
	max-width : 50%;
	color:white;
	text-shadow : 0px 0px 8px blue;
	background-color : rgba(10, 10, 10, 0.95);
	padding : 10px;
	border : 2px solid black;
	border-radius: 3px;
	transform:scale(0) rotate(-45deg);
	transition:all .25s;
	opacity:0;
}

.note:hover span{
	transform: scale(1) rotate(0);
	opacity: 1;
}




-
Edité par Kaidan 14 mars 2018 à 6:16:34

Vous êtes demandeur·se d'emploi ?
Sans diplôme post-bac ?

Devenez Développeur·se web junior

Je postule
Formation
courte
Financée
à 100%

Declencher un "hoover" par défilement

× Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
  • Editeur
  • Markdown