From 933316ee862de340d7c9920d6734fc718b628e56 Mon Sep 17 00:00:00 2001
From: Adrien Beudin <beudbeud@beudibox.fr>
Date: Fri, 9 Mar 2018 10:41:06 +0100
Subject: [PATCH] add css effect

---
 .../themes/exposure/static/css/style-page.css | 41 +++++++++++++++++++
 .../templates/sections/full-picture.html      |  4 +-
 2 files changed, 43 insertions(+), 2 deletions(-)

diff --git a/prosopopee/themes/exposure/static/css/style-page.css b/prosopopee/themes/exposure/static/css/style-page.css
index ebc3cd5..90cf474 100644
--- a/prosopopee/themes/exposure/static/css/style-page.css
+++ b/prosopopee/themes/exposure/static/css/style-page.css
@@ -614,3 +614,44 @@ input:checked + .slider:before {
 .slider.round:before {
   border-radius: 50%;
 }
+
+@keyframes fadeInUp {
+	from {
+		transform: translate3d(0,80px,0)
+	}
+
+	to {
+		transform: translate3d(0,0,0);
+		opacity: 1
+	}
+}
+
+@-webkit-keyframes fadeInUp {
+	from {
+		transform: translate3d(0,80px,0)
+	}
+
+	to {
+		transform: translate3d(0,0,0);
+		opacity: 1
+	}
+}
+
+.animated {
+	animation-delay: 0.5s;
+	animation-duration: 1s;
+	animation-fill-mode: both;
+	-webkit-animation-duration: 1s;
+	-webkit-animation-fill-mode: both
+}
+
+.animatedFadeInUp {
+	opacity: 0
+}
+
+.fadeInUp {
+	opacity: 0;
+	animation-name: fadeInUp;
+	-webkit-animation-name: fadeInUp;
+}
+
diff --git a/prosopopee/themes/exposure/templates/sections/full-picture.html b/prosopopee/themes/exposure/templates/sections/full-picture.html
index 0e3b8ef..29be913 100644
--- a/prosopopee/themes/exposure/templates/sections/full-picture.html
+++ b/prosopopee/themes/exposure/templates/sections/full-picture.html
@@ -6,7 +6,7 @@
   <div class="video-container">
     {% if section.text %}
     <div class="title-container">
-      <div class="headline">
+      <div class="headline animated animatedFadeInUp fadeInUp">
         <h1>{{ section.text.title }}</h1>
         <h2>{{ section.text.sub_title }}</h2>
         {% if section.text.date_end %}
@@ -30,7 +30,7 @@
 <section class="full-picture" style="background: url('{{ image.generate_thumbnail("x2000") }}') no-repeat {% if section.fixed %} fixed {% else %} scroll {% endif %} center top / cover, url('{{ image.generate_thumbnail("x450") }}') no-repeat {% if section.fixed %} fixed {% else %} scroll {% endif %} center top / cover transparent;">
   {% if section.text %}
   <div class="picture-text">
-    <div class="picture-text-column">
+    <div class="picture-text-column animated animatedFadeInUp fadeInUp">
       <h1>{{ section.text.title }}</h1>
       <h2>{{ section.text.sub_title }}</h2>
       {% if section.text.date_end %}