Responsive Gallery Design using HTML, CSS, and Javascript

Hello, learner In this article, we are going to create a Responsive Gallery Design using HTML, CSS, and Javascript. In the earlier past post, we have created Login and signup Form Design using HTML and Pure CSS. Now it is time to create a Responsive Gallery Design.

In this program, we are going to create a responsive Gallery Design Using HTML, CSS, and Javascript. As you see in the above image that is the output of the code. The image is taken from an internet source. There are Five different sections width different images. If you click on fig 2 whole screen changes the image without an error.

Responsive Gallery Design using HTML, CSS, and Javascript [Source code]

To create a Responsive Gallery Design using HTML, CSS, and Javascript you have to create three HTML, CSS, and Js files named index.html, style.css, and script.js in the same folder and you have to link the CSS and JS file to HTML. after that paste the HTML code in index.htm. paste the CSS code in style.css at last paste the JS code in Style.js that’s all after pasting the code. Now your Responsive Gallery Desing is ready.

At first, you have to create an HTML file named index.html paste the below code on it and save it. Remember to give a .html extension to the HTML file.

<!DOCTYPE html>  
 <html lang="en">  
  <head>  
   <meta charset="UTF-8" />  
   <meta http-equiv="X-UA-Compatible" content="IE=edge" />  
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />  
   <title>Accordion gallery</title>  
   <link rel="stylesheet" href="style.css" />  
  </head>  
  <body>  
   <div id="bg"></div>  
   <div id="fg"></div>  
   <script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>  
   <script src="index.js"></script>  
  </body>  
 </html>

After pasting the HTML code the second you have to create a CSS file named style.css. Paste the below code on it and save it. Again remember to give .css extension to CSS file.

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700&display=swap');  
 html, body, #fg, #bg {  
  width:100%;  
  height:100%;  
  color:#fff;  
  font-size:35px;  
  font-family:'Montserrat', sans-serif;  
  overflow:hidden;  
 }  
 div {  
  position:absolute;  
  top:0;  
 }  
 sub {  
  font-size:12px;  
  display:block;  
 }  
 p {  
  padding:12px;  
 }

After pasting both HTML and CSS code Now at last You have to create a Javascript file named script.js. after creating the file now paste the Below code in the js file. Remember to give .js extension to the javascript file.

var imgs = [  
  'https://images.unsplash.com/photo-1506744038136-46273834b3fb?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=50',  
  'https://images.unsplash.com/photo-1511576661531-b34d7da5d0bb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=50',  
  'https://images.unsplash.com/photo-1476610182048-b716b8518aae?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=50',  
  'https://images.unsplash.com/photo-1502657877623-f66bf489d236?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=50',  
  'https://images.unsplash.com/photo-1506361797048-46a149213205?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200&q=50'  
 ],  
 n = imgs.length,  
 current = n-1,  
 closedWidth = Math.floor(window.innerWidth/10)  
 for (var i=0; i<n; i++){="" var="" bgimg="document.createElement('div');" bg.appendchild(bgimg);="" gsap.set(bgimg,="" {="" attr:{id:'bgimg'+i,="" class:'bgimg'},="" width:'100%',="" height:'100%',="" backgroundimage:'url('+imgs[i]+')',="" backgroundsize:'cover',="" backgroundposition:'center'="" })="" b="document.createElement('div');" fg.appendchild(b);="" gsap.fromto(b,="" attr:{id:'b'+i,="" class:'box'},="" innerhtml:'<p=""><sub>Fig.</sub> '+(i+1)+'<p></p><div class='code-block code-block-4' style='margin: 8px 0; clear: both;'>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1904381440953809"
     crossorigin="anonymous"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-format="fluid"
     data-ad-layout-key="-hx-k+g-bj+nx"
     data-ad-client="ca-pub-1904381440953809"
     data-ad-slot="6788407307"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script></div>
',  
 width:'100%',  
 height:'100%',  
 borderLeft:(i>0)?'solid 1px #eee':'',  
 backgroundColor:'rgba(250,250,250,0)',  
 left:i*closedWidth,  
 transformOrigin:'100% 100%',  
 x:'100%'  
 },{  
 duration:i*0.15,  
 x:0,  
 ease:'expo.inOut'  
 })   
 b.onmouseenter = b.onclick = (e)=>{    
 if (Number(e.currentTarget.id.substr(1))==current) return;  
 var staggerOrder = !!(current < Number(e.currentTarget.id.substr(1)));  
 current = Number(e.currentTarget.id.substr(1));  
 gsap.to('.box', {  
  duration:0.5,  
  ease:'elastic.out(0.3)',  
  left:(i)=>(i<=current)? i*closedWidth: window.innerWidth-((n-i)*closedWidth),  
  x:0,  
  stagger: staggerOrder? 0.05:-0.05  
 })  
 bg.appendChild( document.getElementById('bgImg'+current) )  
 gsap.fromTo('#bgImg'+current, {opacity:0}, {opacity:1, duration:0.3, ease:'power1.inOut'})  
 gsap.fromTo('#bgImg'+current, {scale:1.05, rotation:0.05}, {scale:1, rotation:0, duration:1.5, ease:'sine'})   
 }  
 }  
 window.onresize = (e)=>{  
 closedWidth = Math.floor(window.innerWidth/10)  
 gsap.set('.box', { x:0, left:(i)=> (i<=current)? i*closedWidth: window.innerWidth-((n-i)*closedWidth) })  
 }</n;>

That’s all after pasting all the code in the file now your code will successfully run. If you get any kind of error/problem in the code just comment down or contact me on social media

You might like this

Source :- Codepen.io

Responsive Gallery Design using HTML, CSS, and Javascript [Source code]

You might like this

Share this:

Related Posts

Create a Stunning Background Video effect with HTML and CSS

10 Navigation Bar Design using HTML and CSS

Learn Coding Fast: 5 Languages to Jumpstart Your Tech Skills in 15 Days!