me/portfolio
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Animate cookie notice with jQuery instead of CSS

Browse Source
This commit is contained in:
Matthew Grove
2018-11-17 17:40:06 +00:00
parent 1d42732926
commit ca346b5202
2 changed files with 4 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

92
assets/global.css
View File

@@ -75,95 +75,3 @@ body {
color: #--mdc-theme-secondary; color: #--mdc-theme-secondary;
text-decoration: none; text-decoration: none;
} }
#cookies.display {
display: block;
/* Cross browser animation */
-webkit-animation: cookies 1s 1; /* Chrome, Safari 5+ */
-moz-animation: cookies 1s 1; /* Firefox 5-15 */
-ms-animation: cookies 1s 1; /* IE9 */
-o-animation: cookies 1s 1; /* Opera 12.00 */
animation: cookies 1s 1; /* Chrome, Firefox 16+, IE 10+, Opera 12.10+ */
}
@keyframes cookies {
0% {
opacity: 0;
-webkit-transform: translate3d(0,100px,0); /* Safari & Chrome */
-moz-transform: translate3d(0,100px,0); /* Firefox */
-ms-transform: translate3d(0,100px,0); /* IE9 */
-o-transform: translate3d(0,100px,0); /* Opera */
transform: translate3d(0,100px,0);
}
100% {
opacity: 1;
-webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
-moz-transform: translate3d(0,0,0); /* Firefox */
-ms-transform: translate3d(0,0,0); /* IE9 */
-o-transform: translate3d(0,0,0); /* Opera */
transform: translate3d(0,0,0);
}
}
@-webkit-keyframes cookies {
0% {
-webkit-transform: translate3d(0,100px,0); /* Safari & Chrome */
-moz-transform: translate3d(0,100px,0); /* Firefox */
-ms-transform: translate3d(0,100px,0); /* IE9 */
-o-transform: translate3d(0,100px,0); /* Opera */
transform: translate3d(0,100px,0);
}
100% {
-webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
-moz-transform: translate3d(0,0,0); /* Firefox */
-ms-transform: translate3d(0,0,0); /* IE9 */
-o-transform: translate3d(0,0,0); /* Opera */
transform: translate3d(0,0,0);
}
}
@-moz-keyframes cookies {
0% {
-webkit-transform: translate3d(0,100px,0); /* Safari & Chrome */
-moz-transform: translate3d(0,100px,0); /* Firefox */
-ms-transform: translate3d(0,100px,0); /* IE9 */
-o-transform: translate3d(0,100px,0); /* Opera */
transform: translate3d(0,100px,0);
}
100% {
-webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
-moz-transform: translate3d(0,0,0); /* Firefox */
-ms-transform: translate3d(0,0,0); /* IE9 */
-o-transform: translate3d(0,0,0); /* Opera */
transform: translate3d(0,0,0);
}
}
@-o-keyframes cookies {
0% {
-webkit-transform: translate3d(0,100px,0); /* Safari & Chrome */
-moz-transform: translate3d(0,100px,0); /* Firefox */
-ms-transform: translate3d(0,100px,0); /* IE9 */
-o-transform: translate3d(0,100px,0); /* Opera */
transform: translate3d(0,100px,0);
}
100% {
-webkit-transform: translate3d(0,0,0); /* Safari & Chrome */
-moz-transform: translate3d(0,0,0); /* Firefox */
-ms-transform: translate3d(0,0,0); /* IE9 */
-o-transform: translate3d(0,0,0); /* Opera */
transform: translate3d(0,0,0);
}
}
.close-cookies {
-webkit-transition: all 0.2s ease-out;
-moz-transition: all 0.2s ease-out;
-ms-transition: all 0.2s ease-out;
-o-transition: all 0.2s ease-out;
transition: all 0.2s ease-out;
-webkit-transform: translate3d(0,100px,0); /* Safari & Chrome */
-moz-transform: translate3d(0,100px,0); /* Firefox */
-ms-transform: translate3d(0,100px,0); /* IE9 */
-o-transform: translate3d(0,100px,0); /* Opera */
transform: translate3d(0,100px,0);
}

6
assets/global.js
View File

@@ -35,11 +35,13 @@ $(document).ready(function(){
// include cookie notice // include cookie notice
if(!Cookies.get("demo.matthew-grove.ml-cookies-accepted")) { if(!Cookies.get("demo.matthew-grove.ml-cookies-accepted")) {
$("#cookies").load("/page-inserts/cookie-notice.html", function(){ $("#cookies").load("/page-inserts/cookie-notice.html", function(){
$("#cookies").addClass("display"); $("#cookies").show();
$("#cookies").animate({bottom: "+100px"}, 1000);
$(".source-code-link").animate({bottom: "+100px"}, 1000); $(".source-code-link").animate({bottom: "+100px"}, 1000);
$("#close-cookies").click(function(){ $("#close-cookies").click(function(){
event.preventDefault(); event.preventDefault();
$("#cookies").addClass("close-cookies"); $("#cookies").animate({bottom: "0px"}, 1000);
$("#cookies").hide();
$(".source-code-link").animate({bottom: "0px"}, 1000); $(".source-code-link").animate({bottom: "0px"}, 1000);
Cookies.set("demo.matthew-grove.ml-cookies-accepted", "true", {expires: 30}); Cookies.set("demo.matthew-grove.ml-cookies-accepted", "true", {expires: 30});
}); });