Responsive GTA V Slider

Developer
Eduard Mayer
Size
2,854 Kb
Views
72,864
  1. Responsive GTA V Slider Previews
  2. Responsive GTA V Slider HTML Codes
  3. Responsive GTA V Slider CSS Codes
  4. Responsive GTA V Slider JS Codes

How do I make an responsive gta v slider?

A rebuilt version of this one: http://www.rockstargames.com/V/Images are owned by Rockstar Games.Have fun.. What is a responsive gta v slider? How do you make a responsive gta v slider? This script and codes were developed by Eduard Mayer on 13 July 2022, Wednesday.

Responsive GTA V Slider Previews
IQ Test

Responsive GTA V Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Responsive GTA V Slider</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <html lang="en">
<head>	<meta charset="UTF-8">	<title>Responsive GTA V Slider</title>	<meta author="Eduard Mayer">
</head>
<body>	<section class="pen">	<div class="stage">	<div class="element michael"></div>	<div class="element franklin"></div>	<div class="element trevor"></div>	</div>	</section>	<section class="credit">	<p>Code by <a href="http://twitter.com/vsxed" target="_blank" class="credit-link">Eduard Mayer</a>, <a href="http://www.rockstargames.com/V/" target="_blank" class="credit-link">Original</a></p>	<a href="https://github.com/vsxed/Responsive-GTA-V-Slider" target="_blank" class="credit-link button">Fork it on Github</a>	</section>
</body>
</html> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Responsive GTA V Slider - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600,700);
body { padding: 3em 2em; font-family: 'Open Sans', Arial, sans-serif; font-size: 1em; margin: 0; padding: 0; line-height: 1; background: #111111;
}
.pen { max-width: 635px; width: 100%; margin: 50px auto 0; opacity: 0; position: relative; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-animation: 1s appear 1 forwards; -moz-animation: 1s appear 1 forwards; -o-animation: 1s appear 1 forwards; animation: 1s appear 1 forwards;
}
.credit { display: block; max-width: 400px; text-align: center; margin: 150px auto 0; padding: 0; font-size: 0.8em; color: #f0f0f0; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9);
}
.credit p a,
.credit a { color: white; text-decoration: none; font-weight: 700;
}
.credit p a:hover,
.credit a:hover,
.credit p a:active,
.credit a:active { text-shadow: 0 0 5px rgba(255, 255, 255, 0.4); color: white;
}
.credit p a.button,
.credit a.button { padding: 6px 12px; margin-top: 10px; background: #000000; border-radius: 3px;
}
.credit p a.button:hover,
.credit a.button:hover { background: #2b2b2b;
}
.credit p:last-of-type { margin-bottom: 30px;
}
.stage { max-width: 635px; width: 100%; height: 400px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
}
.element { background: green; width: 202px; -webkit-transform-origin: 50% 50%; height: inherit; margin: 0 7px 0 0; display: inline-block; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; -webkit-transform: translate3d(0, 0, 0); -moz-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
}
.element.active { width: 282px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
}
.element.inactive { width: 162px; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; opacity: 0.4;
}
.element.franklin { background: url('http://www.eduardmayer.de/codepen-css-resources/images/gta/franklin.jpeg') 45% 0 no-repeat; background-size: cover;
}
.element.michael { background: url('http://www.eduardmayer.de/codepen-css-resources/images/gta/michael.jpeg') 45% 0 no-repeat; background-size: cover;
}
.element.trevor { background: url('http://www.eduardmayer.de/codepen-css-resources/images/gta/trevor.jpeg') 45% 0 no-repeat; background-size: cover;
}
.element:last-of-type { margin: 0;
}
@media all and (min-width: 900px) { .pen { max-width: 890px; } .element { width: 286px; } .element.inactive { width: 246px; } .element.active { width: 366px; } .stage { max-width: 890px; height: 600px; }
}
@media all and (max-width: 660px) { .pen { max-width: 335px; } .element { width: 101px; } .element.inactive { width: 61px; } .element.active { width: 181px; } .stage { max-width: 335px; }
}
@-webkit-keyframes appear { 15% { opacity: 0; } 100% { opacity: 1; }
}
@-moz-keyframes appear { 15% { opacity: 0; } 100% { opacity: 1; }
}
@-o-keyframes appear { 15% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes appear { 15% { opacity: 0; } 100% { opacity: 1; }
}

Responsive GTA V Slider - Script Codes JS Codes

 $('.element').each(function() { $(this).mouseover(function() { $(this).addClass('active'); $('.stage').children('.element').not('.active').addClass('inactive'); }); $(this).mouseleave(function() { $(this).removeClass('active'); $('.stage').children('.element').not('.active').removeClass('inactive'); }); });
Responsive GTA V Slider - Script Codes
Responsive GTA V Slider - Script Codes
Home Page Home
Developer Eduard Mayer
Username codewunder
Uploaded July 13, 2022
Rating 4.5
Size 2,854 Kb
Views 72,864
Do you need developer help for Responsive GTA V Slider?

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!

Eduard Mayer (codewunder) Script Codes
Name
Enlarge text with buttons and js, with limited max- and min sizes
Social Sharing Buttons
Scrollable see-through headline
Infotype SVG Animation
Twitter Widget Rebound
Animated Ubuntu Touch-styled checkboxes
A Pen by Eduard Mayer
Whatsapp PTT Animation
VelocityJS, fade on scroll
CSSOff 2013 Submission
Create amazing sales emails 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!