document.addEventListener( "DOMContentLoaded", () => { generateElements(); }); /* 🎨 SoloLearn Art Gallery 🖌️🎨🖼️ 🎨 🎨 Date of posting: 5-April-2020 🎨 Created By: (The Blood Coders 💉🌡️) 🎨 Sick L̲̅i̲̅n̲̅e̲̅ B̶r̶o̶🌡️ 🎨 & Man Of Action 🎨 🎨 Don't copy & post publicly(❌) 🎨 🎨 Thank you everyone for sharing your 🎨 awesome drawing with us 😄😄 🎨 🎨 Now its time to wrap the trend 🎨 with this code. 🎨 Hope u will like it 😄😄 🎨 🎨 Keep coding keep learning ✌️😄 */ window.onload = () =>{ setTimeout(()=>{ document.querySelector('.loader').style.display='none'; document.body.style.overflow="visible"; }, 2500); const item = document.querySelectorAll('.gallery-grid__item'); const closeBtn = document.querySelectorAll('.close-btn'); const name = document.querySelectorAll('.contents__text'); var aniNode; item.forEach( element =>{ element.addEventListener('click',(e)=>{ document.body.style.overflow="hidden"; aniNode = element.parentNode.childNodes[3]; aniNode.setAttribute('style','z-index: 10;display:block;height:'+element.offsetHeight+'px'); if (aniNode.classList.contains('odd')){ aniNode.classList.add('conten-ani-right') }else{ aniNode.classList.add('conten-ani'); } setTimeout(()=>{ aniNode.classList.remove('conten-ani'); aniNode.classList.remove('conten-ani-right') aniNode.classList.add('contents--active'); aniNode.style.width = 100 + '%'; aniNode.style.height = 100 + '%'; aniNode.childNodes[1].childNodes[3].setAttribute('style','display:block'); },800); }); }); closeBtn.forEach( btn =>{ btn.addEventListener('click',()=>{ document.body.style.overflow="visible"; aniNode.classList.add('fadeOut'); setTimeout(()=>{ aniNode.classList.remove('contents--active','fadeOut'); aniNode.setAttribute('style',' z-index: 2;display:none'); aniNode.childNodes[1].childNodes[3].setAttribute('style','display:none'); },1000) }) }); } function generateElements(){ const gallery = document.querySelector('.gallery-grid'); gallery.innerHTML=""; for(let i=0; i

${arts[i].name}

close

`; }else{ gallery.innerHTML += `

${arts[i].name}

close

` } } }

SL Art Gallery 🖌️🎨🖼️