Cara Membuat Animasi Slide Konten Resoponsif dengan CSS3

Saat ini animasi pada tampilan website memang sangat penting sekali, karena dengan animasi dan efek ini tampilan website akan terlihat lebih dinamis. Ada banyak sekali animasi yang bisa kita temukan, mulai dari animasi dan efek sederhana sampai dengan efek yang keren. Tentu animasi yang dibuat akan berbeda satu dengan yang lain nya begitu pula dengan kode yang dibuat. Dari mulai kode yang mudah sampai dengan kode yang rumit. Nah berikut ini akan saya bagikan tutorial mudah yakni bagaimana Cara Membuat Animasi Slide Konten Resoponsif dengan CSS3. Tentu ini akan menjadi referensi buat kalian yang ingin membuat aniamsi sederhana namun tetap menarik untuk dilihat. Simak langkah-langkahnya berikut ini.

Pertama-tama kita akan membuat satu file HTML dan menuliskan struktur kode seperti berikut.

<body>
	<section>
		<div id="icon-wrapper">
		  <a href="map.html">
		    <div class="icons">
		      <div class="icon-slide-container">
		        <img class="slide-icon"  alt="The Kite Map Logo" height="100" src="http://thekitemap.com/images/slide/view-map.jpg">
		        </div>
		      </div>
		    </a>
		    
		    <a href="kite-map.php">
		      <div class="icons2">
		        <div class="icon-slide-container">
		          <img class="slide-icon"  alt="The Kite Map Logo" height="100" src="http://thekitemap.com/images/slide/add-beach.jpg">
		          </div>
		        </div>
		      </a>
		      
		      <a href="location.php">
		        <div class="icons3">
		          <div class="icon-slide-container">
		            <img class="slide-icon"  alt="The Kite Map Logo" height="100" src="http://thekitemap.com/images/slide/view-all.jpg">
		            </div>
		          </div>
		        </a>
		        
		        <a href="feedback.html">
		          <div class="icons4">
		            <div class="icon-slide-container">
		              <img class="slide-icon"  alt="The Kite Map Logo" height="100" src="http://thekitemap.com/images/slide/feedback.jpg">
		              </div>
		            </div>
		          </a>
			</div>
		</section>
</body>

Setelah kita membuat struktur kode HTML seperti diatas, selanjutnya kita akan desain dengan kode CSS3 berikut untuk menjadikan tampilan menjadi slide dan juga responsif.

		body{
  background:#eeeeee;
}

section{
		float: left;
		padding-top: 50px;
		padding-bottom: 100px;
		width: 100%;
		padding-left:0;
		padding-right:0;
}

#icon-wrapper{
	width:100%;
	float:left;
	height:300px;
}

.icons {
	width:25%;
	float:left;
	position:relative;
}
.icons2 {
	width:25%;
	float:left;
	position:relative;
	margin-left:25%;
}
.icons3 {
	width:25%;
	float:left;
	position:relative;
	margin-left:50%;
}
.icons4 {
	width:25%;
	float:left;
	position:relative;
	margin-left:75%;
}

.icon-slide-container{
	height:300px;
	overflow:hidden;
	text-align: left;
	position: absolute;
	float: left;
	width: 300px;
	left: 50%;
	margin-left: -150px;
}

.slide-icon{
  width:300px;
  height:auto;
  position:absolute;
  margin-top:-300px;
  -webkit-transition:.4s ease;
  -moz-transition:.4s ease;
  -ms-transition:.4s ease;
  -o-transition:.4s ease;
  transition:.4 ease;
}
	
.slide-icon:hover{
  position:absolute;
  margin-top:0;
}

@media only screen and (max-width: 1300px) {
  #icon-wrapper{
		width:100%;
		float:left;
		height:170px;
	}
  .icon-slide-container {
		height: 200px;
		overflow: hidden;
		text-align: left;
		position: absolute;
		float: left;
		width: 200px;
		left: 50%;
		margin-left: -100px;
	}
  .slide-icon {
		width: 200px;
		height: auto;
		position: absolute;
		margin-top: -200px;
	}
}

@media only screen and (max-width: 1000px) {
  #home-social-container{
		margin-right: 0;
		margin-left: 0;
		width: 100%;
		padding: 0;
		float: left;
		left: 0;
	}
}

@media only screen and (max-width: 840px) {
  #icon-wrapper{
		width:100%;
		float:left;
		height:650px;
	}
	
	.icon-slide-container {
		height: 300px;
		overflow: hidden;
		text-align: left;
		position: absolute;
		float: left;
		width: 300px;
		left: 50%;
		margin-left: -150px;
	}
	
	.slide-icon {
		width: 300px;
		height: auto;
		position: absolute;
		margin-top: -300px;
	}	
	.icons {
		width: 50%;
		float: left;
		position: relative;
	}
	.icons2 {
		width: 50%;
		float: left;
		position: relative;
		margin-left: 50%;
	}
	.icons3 {
		width: 50%;
		float: left;
		position: relative;
		margin-left: 0%;
		margin-top: 350px;
	}
	.icons4 {
		width: 50%;
		float: left;
		position: relative;
		margin-left: 50%;
	}
}
                        
@media only screen and (max-width: 650px) {
	#icon-wrapper {
		height: 400px;
	}
	#section{
		width: 90%;
		padding-left:5%;
		padding-right:5%;
	}
	.slide-icon {
		width: 200px;
		height: auto;
		position: absolute;
		margin-top: -200px;
	}
	.icon-slide-container {
		height: 200px;
		width: 200px;
		left: 50%;
		margin-left: -100px;
	}
	.icons3 {
		width: 50%;
		position: relative;
		margin-left: 0%;
		margin-top: 230px;
	}
}
                                  
@media only screen and (max-width: 570px) {
	#icon-wrapper {
		height: 300px;
	}
	.slide-icon {
		width: 150px;
		height: auto;
		position: absolute;
		margin-top: -150px;
	}
	.icon-slide-container {
		height: 150px;
		width: 150px;
		left: 50%;
		margin-left: -75px;
	}
	.icons3 {
		width: 50%;
		float: left;
		margin-left: 0%;
		margin-top: 190px;
	}	
}

Setelah semua kode diatas diketikan semua, langkah terakhir simpan filenya kemudian buka pada browser masing-masing dan lihat hasilnya. Selesai

Baik, itulah tutorial sederhana mengenai bagaimana Cara Membuat Animasi Slide Konten Resoponsif dengan CSS3. semoga bermanfaat dan menjadikan referensi dalam mendesain tampilan website 🙂

Risman Hakim Author

Menjadi seorang Web Designer membuat saya ingin selalu berbagi ilmu. Berbagi tidak mengurangi ilmu, dengan berbagi ilmu akan terus bertambah. Kenal lebih jauh tentang saya di DUMET School :)

Leave a Reply

Your email address will not be published. Required fields are marked *