Follow the kitty

Developer
Lucas Motta
Size
4,466 Kb
Views
24,288
  1. Follow the kitty Previews
  2. Follow the kitty HTML Codes
  3. Follow the kitty CSS Codes
  4. Follow the kitty JS Codes

How do I make an follow the kitty?

Simple effect for roll over on grids, where the content slides based on the previous position.You can see also in use here: http://worldbakingday.com. What is a follow the kitty? How do you make a follow the kitty? This script and codes were developed by Lucas Motta on 22 September 2022, Thursday.

Follow the kitty Previews
IQ Test

Follow the kitty - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Follow the kitty</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { font-family: Helvetica, Arial, sans-serif; font-size: 16px; -webkit-font-smoothing	: antialiased
}
.grid { margin: 0 auto; padding: 0; width: 100%; max-width: 1000px;
}
.grid li { width: 10%; background: #000000; float: left; position: relative; overflow: hidden;
}
.grid img { float: left; width: 100%; height: auto; position: relative; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0);
}
.grid .info { position: absolute; width: 100%; height: 100%; padding: 15px; background: #DC584C; display: none; z-index: 2; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0);
}
.grid p { font-size: 14px; font-weight: bold; color: #FFF;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul class="grid">	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=1" alt="" />	<div class="info">	<p>Kitty 1</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=2" alt="" />	<div class="info">	<p>Kitty 2</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=3" alt="" />	<div class="info">	<p>Kitty 3</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=4" alt="" />	<div class="info">	<p>Kitty 4</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=5" alt="" />	<div class="info">	<p>Kitty 5</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=6" alt="" />	<div class="info">	<p>Kitty 6</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=7" alt="" />	<div class="info">	<p>Kitty 7</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=8" alt="" />	<div class="info">	<p>Kitty 8</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=9" alt="" />	<div class="info">	<p>Kitty 9</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=10" alt="" />	<div class="info">	<p>Kitty 10</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=11" alt="" />	<div class="info">	<p>Kitty 11</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=12" alt="" />	<div class="info">	<p>Kitty 12</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=13" alt="" />	<div class="info">	<p>Kitty 13</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=14" alt="" />	<div class="info">	<p>Kitty 14</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=15" alt="" />	<div class="info">	<p>Kitty 15</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=1" alt="" />	<div class="info">	<p>Kitty 16</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=2" alt="" />	<div class="info">	<p>Kitty 17</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=3" alt="" />	<div class="info">	<p>Kitty 18</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=4" alt="" />	<div class="info">	<p>Kitty 19</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=5" alt="" />	<div class="info">	<p>Kitty 20</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=6" alt="" />	<div class="info">	<p>Kitty 21</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=7" alt="" />	<div class="info">	<p>Kitty 22</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=8" alt="" />	<div class="info">	<p>Kitty 23</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=9" alt="" />	<div class="info">	<p>Kitty 24</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=10" alt="" />	<div class="info">	<p>Kitty 25</p>	</div>	</a>	</li> <li>	<a href="#">	<img src="http://placekitten.com/200/200?image=11" alt="" />	<div class="info">	<p>Kitty 26</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=12" alt="" />	<div class="info">	<p>Kitty 27</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=13" alt="" />	<div class="info">	<p>Kitty 28</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=14" alt="" />	<div class="info">	<p>Kitty 29</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=15" alt="" />	<div class="info">	<p>Kitty 30</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=1" alt="" />	<div class="info">	<p>Kitty 31</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=2" alt="" />	<div class="info">	<p>Kitty 32</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=3" alt="" />	<div class="info">	<p>Kitty 33</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=4" alt="" />	<div class="info">	<p>Kitty 34</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=5" alt="" />	<div class="info">	<p>Kitty 35</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=6" alt="" />	<div class="info">	<p>Kitty 36</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=7" alt="" />	<div class="info">	<p>Kitty 37</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=8" alt="" />	<div class="info">	<p>Kitty 38</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=9" alt="" />	<div class="info">	<p>Kitty 39</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=10" alt="" />	<div class="info">	<p>Kitty 40</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=11" alt="" />	<div class="info">	<p>Kitty 41</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=12" alt="" />	<div class="info">	<p>Kitty 42</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=13" alt="" />	<div class="info">	<p>Kitty 43</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=14" alt="" />	<div class="info">	<p>Kitty 44</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=15" alt="" />	<div class="info">	<p>Kitty 45</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=1" alt="" />	<div class="info">	<p>Kitty 46</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=2" alt="" />	<div class="info">	<p>Kitty 47</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=3" alt="" />	<div class="info">	<p>Kitty 48</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=4" alt="" />	<div class="info">	<p>Kitty 49</p>	</div>	</a>	</li>	<li>	<a href="#">	<img src="http://placekitten.com/200/200?image=5" alt="" />	<div class="info">	<p>Kitty 50</p>	</div>	</a>	</li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery.transit/0.9.9/jquery.transit.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Follow the kitty - Script Codes CSS Codes

body { font-family: Helvetica, Arial, sans-serif; font-size: 16px; -webkit-font-smoothing	: antialiased
}
.grid { margin: 0 auto; padding: 0; width: 100%; max-width: 1000px;
}
.grid li { width: 10%; background: #000000; float: left; position: relative; overflow: hidden;
}
.grid img { float: left; width: 100%; height: auto; position: relative; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0);
}
.grid .info { position: absolute; width: 100%; height: 100%; padding: 15px; background: #DC584C; display: none; z-index: 2; -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0,0,0);
}
.grid p { font-size: 14px; font-weight: bold; color: #FFF;
}

Follow the kitty - Script Codes JS Codes

/*
Simple effect for roll over on grids, where the content slides based on the previous position.
You can see also in use here: http://worldbakingday.com
Libraries: jQuery and jQuery.transit */
(function() { $(function() { var columns, current, easing, grid, hideItem, showItem, time; grid = $(".grid"); current = { index: -1, column: 0, line: 0 }; columns = 10; easing = "cubic-bezier(0.165, 0.840, 0.440, 1.000)"; time = 400; grid.on("mouseenter", "a", (function(_this) { return function(e) { var column, el, image, index, info, item, line; el = $(e.currentTarget); info = el.find(".info"); image = el.find("img"); index = el.parent().index(); column = index % columns; line = Math.floor(index / columns); console.log(index, column, line); item = { el: el, index: index, column: column, line: line, info: info, image: image }; if (current.el && current.index === index) { return; } if (line === current.line && column > current.column) { showItem(item, "-100%", 0, "25%", 0); hideItem(current, "100%", 0, "-25%", 0); } else if (line === current.line && column < current.column) { showItem(item, "100%", 0, "-25%", 0); hideItem(current, "-100%", 0, "25%", 0); } else if (line > current.line && column === current.column) { showItem(item, 0, "-100%", 0, "25%"); hideItem(current, 0, "100%", 0, "-25%"); } else { showItem(item, 0, "100%", 0, "-25%"); hideItem(current, 0, "-100%", 0, "25%"); } return current = item; }; })(this)); showItem = function(item, infoX, infoY, imageX, imageY) { item.info.stop().css({ x: infoX, y: infoY, display: "block" }).transition({ x: 0, y: 0, duration: time, easing: easing }); return item.image.stop().transition({ x: imageX, y: imageY, opacity: .5, duration: time, easing: easing }); }; return hideItem = function(item, infoX, infoY, imageX, imageY) { if (!item.el) { return; } item.info.stop().transition({ x: infoX, y: infoY, duration: time, easing: easing }); return item.image.stop().css({ x: imageX, y: imageY, opacity: .5 }).transition({ x: 0, y: 0, opacity: 1, duration: time, easing: easing }); }; });
}).call(this);
Follow the kitty - Script Codes
Follow the kitty - Script Codes
Home Page Home
Developer Lucas Motta
Username lucasmotta
Uploaded September 22, 2022
Rating 4.5
Size 4,466 Kb
Views 24,288
Do you need developer help for Follow the kitty?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Lucas Motta (lucasmotta) Script Codes
Name
Medium Menu
Flying Particles
CSS Triangles with shadow
3D Kitty Grid
CSS Grid Example
A Pen by Lucas Motta
Responsive Infinite Carousel
Create amazing marketing copy with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!