avana/sito-hackit-20
3
0
Fork 2
Code Issues Pull requests Releases Wiki Activity

effetti tamarri sul logo

Browse source
This commit is contained in:
boyska 2020-07-28 17:29:25 +02:00
parent 6b4fae96ef
commit a711e9cb77
3 changed files with 95 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

79
themes/maya0x17/static/effects.css Normal file
View file

@ -0,0 +1,79 @@
/* pulse {{{ */
.pulse {
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 0 rgba(204,169,44, 0.4);
animation: pulse 5s infinite;
}
.pulse:hover {
animation: none;
}
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
}
67% {
-webkit-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
}
70% {
-webkit-box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
}
73% {
-webkit-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
}
76% {
-webkit-box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
}
79% {
-webkit-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
}
100% {
-webkit-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
}
}
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
}
67% {
-moz-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
}
70% {
-moz-box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
}
73% {
-moz-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
}
76% {
-moz-box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
box-shadow: 0 0 0 2vw rgba(130,130,130,0.4);
}
79% {
-moz-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
}
100% {
-moz-box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
box-shadow: 0 0 0 0 rgba(130,130,130,0.4);
}
}
/* pulse }}} */
/* rotate {{{ */
.rotate {
animation: rotation 1s infinite ease-out;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(1440deg);
}
}
/* rotate }}} */

29
themes/maya0x17/static/ruotalogo.js
View file

@ -1,23 +1,19 @@
document.addEventListener('DOMContentLoaded', function() {
console.log('start!')
var logo = document.getElementById('logo-img')
logo.classList.add('rotate')
function ruotaLogo() {
logo.style.transform = 'rotate(' + -window.pageYOffset/2+'deg)'
}
function scrollSetup() {
"use strict";
let last_known_scroll_position = 0;
let ticking = false;
var last_known_scroll_position = 0
var ticking = false
function doSomething(scroll_pos) {
// Do something with the scroll position
}
window.addEventListener('scroll', function(e) {
last_known_scroll_position = window.scrollY;
window.addEventListener('scroll', function (e) {
last_known_scroll_position = window.scrollY
if (!ticking) {
window.requestAnimationFrame(function() {
window.requestAnimationFrame(function () {
ruotaLogo()
ticking = false;
@ -25,13 +21,16 @@ document.addEventListener('DOMContentLoaded', function() {
ticking = true;
}
});
})
}
ruotaLogo()
scrollSetup()
logo.addEventListener('click', function() {
setTimeout(function () {
logo.classList.remove('rotate')
//ruotaLogo()
scrollSetup()
}, 1000)
logo.addEventListener('click', function () {
var menu = document.querySelector('#menu-row')
if (window.getComputedStyle(menu).display == 'none') {
if (window.getComputedStyle(menu).display === 'none') {
menu.style.display = 'block'
// menu.scrollIntoView()
} else {

3
themes/maya0x17/templates/base.html
View file

@ -7,6 +7,7 @@
<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/skeleton/css/normalize.css" />
<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/skeleton/css/skeleton.css" />
<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/theme.css" />
<link rel="stylesheet" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/effects.css" />
{% if FAVICON %}
<link href="{{ SITEURL }}/{{ FAVICON }}" rel="icon">
@ -21,7 +22,7 @@
</head>
<body>
<div id="logo-div">
<img id="logo-img" src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/logo.png" style="width: 15vw" />
<img id="logo-img" class="pulse" src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/logo.png" style="width: 15vw" />
</div>
<div id="all-wrapper">
<div class="row" id="header-row">