I have gallery on website. The task is to make the photos in the gallery change smoothly at the touch of a buttons. When you press the same button again, the pictures should disappear.
I know how to do it in CSS but it's not smooth enough, but JS just started to learn and I have no idea how to do it in JS. I tried to make through changing oppacity, but have no results.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="artfiles/effect1.css" />
<script src="artfiles/modernizr.custom.js"></script>
<!-- /maincss2 -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<link rel="stylesheet" type="text/css" href="./artfiles/main2.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- /maincss2 -->
<link rel="stylesheet" href="./css/example.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery//2.2.0/jquery.min.js"></script>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/style.css" >
<link rel="stylesheet" id="six_mainstyle-css" href="./artfiles/main.css" type="text/css" media="all">
<title>Gallery
</title>
<body class="demo-1">
<!-- /Preloader -->
<!-- /Preloader -->
<!-- /Content -->
<!-- Pushy Menu -->
<div class="container" data-0="transform:translateX(0%)" data-4000="transform:translateX(-450%)">
<section style="background-color:#f3f2ed;">
<div class="storyBx">
<h1></h1>
<div class="fadeIn"><h2 style="padding-left: 35.66%;padding-top: 25%; letter-spacing:6pt;">Gallery</h2></div>
</div>
<div class="storyBx" style="padding-left: 25.66% ;padding-top: 8.5%; font-size: 130%; list-style-type: none;">
<h1>
<div class="fadeIn"> Art Works</li>
<li> Photos6</a></li>
<li> Photos5</li>
<li>Photos4</li>
<li>Photos3</li>
<li>Photos2</li></div>
</ul>
</h1>
</div>
</section>
<section style="background-color:#f3f2ed;">
<div class="imgBx"><img style="padding-bottom: 12.5%;" src="img/Courses1.png">
</div></section>
<section style="background-color:#f3f2ed;">
<div class="imgBx"><img style="padding-bottom: 12.5%;" src="img/Courses2.png">
</div></section>
<section style="background-color:#f3f2ed;">
<div class="imgBx"><img style="padding-bottom: 12.5%;" src="img/Courses3.png">
</div></section>
<section style="background-color:#f3f2ed;">
<div class="imgBx"><img style="padding-bottom: 12.5%;" src="img/Courses4.png">
</div></section>
<section style="background-color:#f3f2ed; z-index: 10; position: relative; padding-left:8%;
">
<div class="storyBx" >
<h1 style="font-family: Thin; font-size: 400%; margin-bottom: 0; margin-top:10vh; line-height: 100%; letter-spacing:0;">Dont be shy,<h2 style="font-family: BrownLight; margin:0; font-size: 400%;font-weight: 100; margin-top: 9%;">Say hi</h2>
</div>
<div class="icons">
<a href="https://twitter.com/"><div class="circle"><i class="fab fa-twitter"></i></div></a>
<a href="https://www.facebook.com//"><div class="circle"><i class="fab fa-facebook" aria-hidden="true"></i></div></a>
<a href="https://www.instagram.com/"><div class="circle"><i class="fab fa-instagram"></i></div></a>
<a href="https://www.youtube.com/"><div class="circle"><i class="fab fa-youtube"></i></div></a>
<a href="https://www.pinterest.ru/"><div class="circle"><i class="fab fa-vk"></i></div></a>
<a href="https://tlgg.ru/"><div class="circle"><i class="fab fa-telegram"></i></div></a>
</div>
</div>
</div>
</section>
</div>
<!-- </div> -->
</div>
</div>
</div>
</div>
</div>
</div>
</main>
</div><!-- /container -->
</div><!-- /body_class -->
</div><!-- /#app -->
<!-- Pushy Menu -->
<!-- Scripts main -->
<script type="text/javascript" src="./artfiles/main.js">
</script>
<script type="text/javascript" src="./artfiles/script.js"></script>
<script type="text/javascript" src="./artfiles/jquery.js">
</script>
<script src="./artfiles/classie.js"></script>
<script src="./artfiles/pathLoader.js"></script>
<script src="./artfiles/mainpre.js"></script>
<!-- Scripts main -->
<!-- Scripts main2 -->
<script type="text/javascript" async="" src="./Barn + Co — A creative digital design and branding agency_files/analytics.js"></script>
<script defer="defer" src="./artfiles/main2.js"></script>
<script async="" src="./artfiles/js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.15.0/prism.min.js"></script>
<script type="text/javascript" src="skrollr.js"></script>
<script type="text/javascript">
skrollr.init();
</script>
</body>
</html>
```html
Aucun commentaire:
Enregistrer un commentaire