BDEMetz/bde-liste
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

scroll animation #1

Merged
asyncnomi merged 1 commit from front into master 2022-12-15 16:18:42 +00:00
Conversation 0 Commits 1 Files changed 4 +53 -5
4 changed files with 53 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
static/css/main.css
View file

@ -94,6 +94,7 @@ a {
color: #d75b00;
}
a:hover {
text-decoration: underline;
cursor: pointer;

16
static/index.html
View file

@ -22,7 +22,7 @@
<div class="row banner">
<h1>Prochaine activité</h1>
<span class="activite-temps" id="timer">00:00:10</span>
<p class="activite-desc">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta tenetur tempora similique. A id esse expedita atque dolor eum itaque fugiat enim nisi dicta. Architecto mollitia quasi sed voluptatibus? Veniam.</p>
<p id="activite-desc">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Dicta tenetur tempora similique. A id esse expedita atque dolor eum itaque fugiat enim nisi dicta. Architecto mollitia quasi sed voluptatibus? Veniam.</p>
</div>
<hr/>
@ -51,10 +51,24 @@
<hr/>
<div class="row banner">
<h1>Chasse au trésor</h1>
<p id="chasse-desc">
Chaque jour de la semaine tes espions préférés ont préparé pour toi une <i style="font-weight: 900;">chasse au trésor</i> !
Résous les énigmes pour tenter de gagner le fameux <u>ticket d'or</u>. Il te permettra de t'abrever gratuitement pendants les évenements festifs !
</p>
</div>
<hr/>
<div class="row banner">
<h1>À propos de nous !</h1>
<img src="img/team.jpeg" alt="la liste du bde de 2025" />
</div>
<footer class="row">
Copyright © OSS 110'Metz
</footer>
</div>
</div>

35
static/js/anim.js
View file

@ -1,3 +1,31 @@
var $animation_elements = $("#prank-desc, #activite-desc, #chasse-desc");
var $window = $(window)
function check_if_in_view() {
var window_height = $window.height();
var window_top_position = $window.scrollTop();
var window_bottom_position = (window_top_position + window_height);
$.each($animation_elements, function() {
var $element = $(this);
var element_height = $element.outerHeight();
var element_top_position = $element.offset().top;
var element_bottom_position = (element_top_position + element_height);
//check to see if this current container is within viewport
if ((element_bottom_position >= window_top_position) &&
(element_top_position <= window_bottom_position)) {
if(!$element.hasClass('animated')) {
$element.addClass('animated');
new TypeIt('#' + $element.attr('id'), {
speed: 30,
})
.go();
}
}
});
}
$(window).on("load", function() {
/*let type = new TypeIt("#typed-data", {
@ -10,7 +38,8 @@ $(window).on("load", function() {
$(document).on("click", function() {
type.options({speed: 1});
});*/
});
$(window).on("scroll resize", check_if_in_view);
$(window).trigger("scroll");
$("#prank-button").hover(function () { $('.hover-circle').fadeIn(100) }, function(){ $('.hover-circle').fadeOut(100) });
$("#prank-button").hover(function () { $('.hover-circle').fadeIn(100) }, function(){ $('.hover-circle').fadeOut(100) });
});

6
static/js/main.js
View file

@ -18,6 +18,10 @@ $(window).on("load", function() {
t[1] = 0;
t[2] = 0;
}
$("#timer").text(t.join(":"));
$("#timer").text((new Date('December 17, 1995 ' + t.join(':'))).toLocaleTimeString('default', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit'
}));
}, 1000);
});