Commit 52dfa347 authored by Mabille's avatar Mabille

avec les animes tipss

parent 9a3277cb
<!DOCTYPE html>
<html>
<head>
<title>Css Tricks - Animate</title>
<link rel="stylesheet" type="text/css" href="assets/css/reset.css">
<link rel="stylesheet" type="text/css" href="assets/css/animate.css">
</head>
<body>
<main>
<section>
<h2>Help MDN > <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations" target="_blank">https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations</a></h2>
<h2>fadeIn</h2>
<div class="animate" id="fadeIn">
<img src="http://amoureusedetoi.a.m.pic.centerblog.net/wx3g35xo.jpg">
</div>
<style type="text/css" contenteditable>
@keyframes fadeIn{
from{
opacity: 0;
}
to{
opacity: 1;
}
}
#fadeIn{
animation-duration: 6s;
animation-iteration-count: infinite;
animation-name: fadeIn;
}
</style>
<h2>colorSwitch</h2>
<div class="animate" id="colorSwitch"></div>
<style type="text/css">
@keyframes colorSwitch{
from{
background-color: red;
}
to{
background-color: yellow;
}
}
#colorSwitch{
animation-duration: 3s;
animation-iteration-count: infinite;
animation-name: colorSwitch;
}
</style>
<h2>rotate</h2>
<div class="animate" id="rotate">
<img src="http://amoureusedetoi.a.m.pic.centerblog.net/wx3g35xo.jpg">
</div>
<style type="text/css" contenteditable>
@keyframes rotate{
from{
transform: rotate(-360deg);
transform-origin: 50% 50%;
}
to{
transform: rotate(0deg);
transform-origin: 50% 50%;
}
}
#rotate img{
animation-duration: 1s;
animation-iteration-count: infinite;
animation-name: rotate;
}
</style>
<h2>coucou</h2>
<div class="animate" id="coucou">
<img src="http://amoureusedetoi.a.m.pic.centerblog.net/wx3g35xo.jpg">
</div>
<style type="text/css" contenteditable>
@keyframes coucou{
from{
margin-left: -100%;
}
to{
margin-left: 50%;
}
}
#coucou img{
animation-duration: 2s;
animation-iteration-count: infinite;
animation-name: coucou;
position: absolute;
z-index: -1;
width: 25%;
}
</style>
</section>
</main>-
</body>
</html>
\ No newline at end of file
@font-face{
font-family: "not-courr";
src:url("../fonts/not-courrier/NotCourierSans.otf");
font-style: normal;
font-weight: normal;
}
html{
font-size: 28px;
}
body{
font-family: "not-courr";
padding: 2rem;
}
.animate{
width: 100%;
}
style{
display: block;
white-space: pre-wrap;
}
main>section{
display: flex;
flex-wrap: wrap;
padding: 0 0 4rem 0;
}
main>section h2{
font-size: 1.5rem;
margin: 0 0 2rem 0;
width: 100%;
}
main>section h2:not(first-of-type){
margin: 4rem 0 2rem 0;
}
main>section .animate{
width: 50%;
}
main>section .animate img{
width: 50%;
}
main>section>style{
width: 50%;
background-color: #fff;
height: 100%;
}
\ No newline at end of file
/* FONTS */
@font-face {
font-family: "alphabet";
src: url("../fonts/osp_alfphabet/Alfphabet-IV.ttf");
font-weight: normal;
font-style: normal; }
/* ANIMS */
@keyframes appear {
from {
height: 0; }
to {
height: 80vh; } }
@keyframes rotateAppear {
from {
transform: rotate(-360deg);
opacity: 0;
height: 0; }
to {
transform: rotate(0);
opacity: 1;
height: 80vh; } }
@keyframes hiItsMe {
from {
margin: 0 0 0 -200%; }
to {
margin: 0 -200% 0 0; } }
/* STYLE */
main {
font-family: "alphabet"; }
main .slides {
font-size: 8vw; }
main .slides div.sing {
background: linear-gradient(#f1f441, #f44141);
text-align: center; }
main .slides div.sing .blue {
color: blue;
display: inline; }
main .slides [data-slide='18.6'] img {
animation-duration: 1s;
animation-name: appear;
animation-iteration-count: 4; }
main .slides [data-slide='22.6'] img {
animation-duration: 2s;
animation-name: rotateAppear;
animation-iteration-count: 2;
height: 80vh; }
main .slides [data-slide='26.6'] img {
animation-duration: 2s;
animation-name: hiItsMe;
animation-iteration-count: 2;
height: 80vh; }
main .slides [data-slide='30.4'] .text {
position: absolute; }
main .slides [data-slide='30.4'] img {
height: 80vh; }
main .slides [data-slide='30.4'] .text {
width: 100%;
color: blue;
z-index: 9;
text-align: center; }
@charset "UTF-8";
/* http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)
*/
* {
box-sizing: border-box; }
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
text-decoration: none;
box-sizing: border-box;
font-style: normal;
font-weight: normal; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block; }
body {
line-height: 1; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
table {
border-collapse: collapse;
border-spacing: 0; }
a {
color: inherit;
cursor: pointer; }
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 0; }
select::-ms-expand {
display: none; }
@font-face {
font-family: "archivo";
src: url("../fonts/archivo/ArchivoBlack-Regular.otf");
font-style: normal;
font-weight: normal; }
@font-face {
font-family: "not-courr";
src: url("../fonts/not-courrier/NotCourierSans.otf");
font-style: normal;
font-weight: normal; }
html {
font-size: 20px; }
body {
width: 100%; }
body > header {
font-family: "archivo";
padding: 1rem;
position: fixed;
bottom: 0;
right: 0.5rem; }
body > header h1 > span {
color: blue; }
body .track {
display: none; }
.controls {
position: absolute;
font-size: 1rem;
margin: -4rem 0.5rem 0 1.5rem;
display: flex;
width: calc(100% - 2rem);
font-family: "not-courr"; }
.controls > div {
padding: 0.25rem 0 0.25rem 0;
margin: 0.5rem;
background-color: white;
border: solid 1px; }
.controls .bar {
width: 20rem;
padding: 0; }
.controls .bar .progress {
width: 0;
background-color: blue;
height: 100%; }
.controls .play,
.controls .pause {
width: 2rem;
text-align: center; }
.controls .play::before {
content: "❙❙"; }
.controls .pause::before {
content: "▶"; }
.controls .seconds {
padding: 0.25rem 0.25rem 0.1rem 0.25rem; }
.slides > div {
display: none; }
.slides div.sing {
display: block;
min-width: 100%;
height: 100vh;
padding: 4rem; }
@media only screen and (max-width: 1300px) {
html {
font-size: 14px; } }
/* ---- MATH ---- */
function map_range(value, low1, high1, low2, high2) {
return low2 + (high2 - low2) * (value - low1) / (high1 - low1);
}
/* ---- STRINGS ---- */
function getVidId(src){
var last = src.lastIndexOf("v=")+2;
var vidId = src.substr(last);
return vidId;
}
/* ---- DOM ---- */
function setIds(){
tracks.forEach((track, index) => {
var id = "track-"+index;
track.id=id;
tracksIds.push(id);
counts.push(0);
track.dataset.num=index;
});
}
/* ---- KARAOKE ---- */
function counter(track, index){
var frameRate = 10;
var inter = (track, index) => {
var time = Math.trunc(track.getCurrentTime()*10)/10;
var nowFrame = karaokes[index].querySelector("[data-slide='"+time+"']");
setProgressBar(track, time, index);
if(nowFrame){
if(!nowFrame.classList.contains("sing")){
var slides = karaokes[index].querySelectorAll(".slides>div");
slides.forEach((slide) => {
if(slide.classList.contains("sing")){
slide.classList.remove("sing");
}
});
nowFrame.classList.add("sing");
}
}
}
return setInterval(inter, frameRate, track, index);
}
function setKaraoke(player, event, index){
var state = event.data;
if(state == 1){
counts[index] = counter(player, index);
}
if(state == 2){
clearInterval(counts[index]);
}
if(state == 0){
clearInterval(counts[index]);
count = 0;
}
}
function setCurrentFrame(index, seconds){
var slides = karaokes[index].querySelectorAll(".slides>div");
var slideTimes = [];
slides.forEach((slide) => {
var slideTime = parseFloat(slide.dataset.slide);
if(slideTime <= seconds){
slideTimes.push(slideTime);
}
if(slide.classList.contains("sing")){
slide.classList.remove("sing");
}
});
var thatSlide = karaokes[index].querySelector("[data-slide='"+slideTimes[slideTimes.length-1]+"']");
thatSlide.classList.add("sing");
}
function fillTotalTimes(player){
totalTimes.push(player.getDuration());
}
/* CONTROLS PLAYER */
function setProgressBar(player, currentTime, index){
var bar = progressBars[index];
var totalTime = totalTimes[index];
var progress = bar.querySelector(".progress");
var length = bar.offsetWidth;
var progLength = Math.round(map_range(currentTime, 0, totalTime, 0, length));
progress.style.width=progLength+"px";
setTimer(index, currentTime);
}
function setTimer(index, time){
var counter = karaokes[index].querySelector(".seconds");
counter.innerHTML=time+" (s)";
}
function navigateInProgressBar(player, index){
let bar = progressBars[index];
bar.addEventListener("click", (e) => {
var rect = e.target.getBoundingClientRect();
var pos = e.clientX - rect.left;
var length = bar.offsetWidth;
var progress = bar.querySelector(".progress");
var secs = Math.round(map_range(pos, 0, length, 0, totalTimes[index]));
player.seekTo(secs);
progress.style.width=pos+"px";
if(player.getPlayerState() == 1){
player.playVideo();
}
setCurrentFrame(index, secs);
setTimer(index, secs);
});
}
function setPlayPauseButton(player, index){
var playButt = karaokes[index].querySelector("[data-action='playpause']");
playButt.addEventListener("click", () => {
if(playButt.classList.contains("pause")){
player.playVideo();
playButt.classList.remove("pause");
playButt.classList.add("play");
}else{
player.pauseVideo();
playButt.classList.remove("play");
playButt.classList.add("pause");
}
});
}
/* ---- YOUTUBE EMBED ---- */
function onYouTubeIframeAPIReady(){
tracks.forEach((track, index) => {
players[index] = new YT.Player(track.id, {
videoId: getVidId(track.dataset.src),
playerVars: { 'autoplay': 0, 'controls': 0,'autohide':1,'wmode':'opaque','origin':'http://localhost:80' },
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
});
}
function onPlayerReady(event) {
var index = parseInt(event.target.getIframe().dataset.num);
fillTotalTimes(event.target);
setPlayPauseButton(event.target, index);
navigateInProgressBar(event.target, index);
}
function onPlayerStateChange(event){
var index = parseInt(event.target.getIframe().dataset.num);
setKaraoke(event.target, event, index);