Хорошо, так что краткое объяснение этого кода ... у нас есть onclick элементов HTML, вызывающих функцию handleClick
и передающих ей this
, также известную как img, по которому был выполнен щелчок.
Внутри В нашем обработчике мы получаем источник изображения из атрибута sr c и элемент p, который содержится в атрибуте yeep
. Затем мы l oop через каждый столбец, устанавливая анимацию в движении, и когда мы переходим к последнему столбцу, мы создаем переменную для анимации и добавляем обработчик событий с обратным вызовом (который должен быть заключен в анонимную функцию или он не будет работать правильно). Мы передаем обратный вызов нашему элементу column4 (или последнему) вместе с содержимым атрибутов sr c и yeep в качестве параметров.
Как только наша анимация завершается sh, срабатывает наш обратный вызов, который затем устанавливает более крупный источник изображения и содержимое абзаца в соответствующие элементы, а затем устанавливает их отображение, чтобы сделать их видимыми.
var click = 0;
function checkClicks(imgs) {
if(click == 0) {
setTimeout(function(){
myFunction(imgs);
}, 10000);
} else {
myFunction(imgs);
}
click = 1;
}
function whichAnimationEvent(){
var t,
el = document.createElement("fakeelement");
var animations = {
"animation" : "animationend",
"OAnimation" : "oAnimationEnd",
"MozAnimation" : "animationend",
"WebkitAnimation": "webkitAnimationEnd"
}
for (t in animations){
if (el.style[t] !== undefined){
return animations[t];
}
}
}
const customCallback = (e, s, y) => {
let p = document.getElementById("img-paragraph");
p.innerHTML = y;
var expImg = document.getElementById("expandedImg");
expImg.src = s;
expImg.parentElement.style.display = "table-cell";
p.style.display = "table-cell";
let ele = document.getElementById("column4");
ele.removeEventListener(window.animationEvent, customCallback);
}
const handleClick = (e) => {
let yeep = e.getAttribute("yeep");
let eleArr = ["column1", "column2", "column3", "column4"];
for (ele in eleArr) {
let thisEle = document.getElementById(eleArr[ele]);
if (thisEle.classList) thisEle.classList.add('animate')
else thisEle.className += " " + "animate";
if (eleArr[ele] === "column4") {
var animationEvent = whichAnimationEvent();
thisEle.addEventListener(animationEvent, () => customCallback(thisEle, e.src, yeep));
}
}
}
@font-face {
font-family: 'futuralight';
src: url('../Fonts/Futura Light/futura_light_regular-webfont.woff2') format('woff2'), url('../Fonts/Futura Light/futura_light_regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'tekoregular';
src: url('../Fonts/Teko/teko-regular-webfont.woff2') format('woff2'), url('../Fonts/Teko/teko-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'playfair_displayregular';
src: url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff2') format('woff2'), url('../Fonts/Playfair Display/playfairdisplay-regular-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'poppinsmedium';
src: url('../Fonts/Poppins/poppins-medium-webfont.woff2') format('woff2'), url('../Fonts/Poppins/poppins-medium-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
* {
margin: 0px;
padding: 0px;
border: 0px;
}
.topnav {
background-color: rgb(84, 104, 217);
overflow: hidden;
font-family: 'futuralight';
font-weight: 900;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 20px 21px;
text-decoration: none;
font-size: 19px;
position: relative;
left: 2%;
}
.topnav a:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: hidden;
transform: scaleX(0);
transition: all 0.3s ease-in-out 0s;
}
.topnav a:hover:before {
visibility: visible;
transform: scaleX(1);
}
.topnav a.active-menu:before {
content: "";
position: absolute;
width: 84%;
height: 2px;
bottom: 6px;
left: 8%;
background-color: white;
visibility: visible;
transform: scaleX(1);
transition: all 0.3s ease-in-out 0s;
}
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {
opacity: 0.85;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
.totalbody {
background-color: #EEF0FC;
height: 5000px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The expanding image container */
#expandedImg {
width: 40%;
padding-top:20px;
padding-left:20px;
}
/* Expanding image text */
/* image paragraph */
#img-paragraph {
display: none;
vertical-align: top;
text-align: left;
position: absolute;
height: 400px;
width: 50%;
background-color: white;
box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072), 0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
border-radius: 7px;
float: right;
right: 30px;
top: 120px;
}
#expanded-wrapper {
width: 100%;
}
/* Closable button inside the expanded image */
.row {
position: absolute;
top: 80px;
}
.yeep1 {
position: relative;
left: 12px;
top: 16px;
color: rgb(84, 104, 217);
font-weight: 900;
font-size: 40px;
font-family: 'futuralight';
text-decoration: none;
line-height: 1;
padding-left:4%;
padding-top:30px;
}
.yeep2 {
color: purple;
}
.yeep3 {
color: green;
}
.yeep4 {
color: blue;
}
.yeep1::before {
content: '';
background-color: rgb(84, 104, 217);
width: 12px;
height: 100%;
position: absolute;
right: 100%;
bottom: -16px;
}
#column1 {
position: relative;
}
.animate {
-webkit-animation: floatBubble 2s normal ease-out;
animation: floatBubble 2s forwards normal ease-out;
}
@-webkit-keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
}
}
@keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
left:50px;
}
}
#column2 {
position: relative;
}
.animate {
-webkit-animation: floatBubble 2s normal ease-out;
animation: floatBubble 2s forwards normal ease-out;
}
@-webkit-keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
}
}
@keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
left:50px;
}
}
#column3 {
position: relative;
}
.animate {
-webkit-animation: floatBubble 2s normal ease-out;
animation: floatBubble 2s forwards normal ease-out;
}
@-webkit-keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
}
}
@keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
left:50px;
}
}
#column4 {
position: relative;
}
.animate {
-webkit-animation: floatBubble 2s normal ease-out;
animation: floatBubble 2s forwards normal ease-out;
}
@-webkit-keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
}
}
@keyframes floatBubble {
0% {
top:00px;
}
100% {
top: 500px;
left:50px;
}
}
@media only screen and (max-width: 830px) and (min-width: 760px) {
.topnav {
background-color: yellow;
overflow: hidden;
}
}
@media only screen and (max-width: 759px) and (min-width: 646px) {
.topnav {
background-color: red;
overflow: hidden;
}
}
@media only screen and (max-width: 645px) {
.topnav {
background-color: black;
overflow: hidden;
}
}