Fluid poster wall

Developer
Joseph
Size
2,856 Kb
Views
16,192
  1. Fluid poster wall Previews
  2. Fluid poster wall HTML Codes
  3. Fluid poster wall CSS Codes
  4. Fluid poster wall JS Codes

How do I make an fluid poster wall?

A dynamic poster wall that inflates on tap/click - maybe a selection system?. What is a fluid poster wall? How do you make a fluid poster wall? This script and codes were developed by Joseph on 21 November 2022, Monday.

Fluid poster wall Previews
IQ Test

Fluid poster wall - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>fluid poster wall</title> <link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id="gallery-container"> <ul id="gallery"> <li class="poster"> <div class="image" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-b3QZW27/0/X3/Deep%20in%20the%20Guangxi%20Province%20of%20China-X3.jpg)"></div> <span></span> </li> <li class="poster"> <div class="image" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-PDWKHDz/0/X3/Trey-Ratcliff-China-2013-acbd-X3.jpg)"></div> <span></span> </li> <li class="poster"> <div class="image" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-rqtfDTH/3/X3/4070581709_a1c668a779_o-X3.jpg)"></div> <span></span> </li> <li class="poster"> <div class="image" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-MbXWDKH/2/X3/trey-ratcliff-milford10-X3.jpg)"></div> <span></span> </li> <li class="poster"> <div class="image" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-kVGPDk7/0/X3/Big-sur-California%20%28319%20of%20366%29-X3.jpg)"></div> <span></span> </li> <li class="poster"> <div class="image" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-dLcWhrZ/0/X3/The%20Long%20Road%20in%20NZ-X3.jpg)"></div> <span></span> </li> <li class="poster"> <div class="image" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-XrppVnZ/0/X3/Trey%20Ratcliff%20-%20Death%20Valley%20-%20Mysterious%20Rocks%20-%20low-X3.jpg)"></div> <span></span> </li> <li class="poster"> <div class="image" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-bsMJnLk/0/X3/thepark-X3.jpg)"></div> <span></span> </li> <li class="poster"> <div class="image" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-HZT8VDH/0/X3/Trey%20Ratcliff%20-%20Aurora%20Australis%20-%20Landing%20on%20the%20River%20-%20Queenstown%20-%20New%20Zealand-X3.jpg)"></div> <span></span> </li> <li class="poster"> <div class="image" style="background-image:url(http://stuckincustoms.smugmug.com/Portfolio/i-khJF5DB/0/X3/Trey%20Ratcliff%20-%20China%202011%20-%20A%20Great%20Wall%20at%20Sunset-X3.jpg)"></div> <span></span> </li> </ul>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery.touchswipe/1.6.4/jquery.touchSwipe.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Fluid poster wall - Script Codes CSS Codes

#gallery-container
{ position:absolute; width:100%; margin:0px; padding:0px; top:0px; left:0px; background:#000;
}
#gallery
{ position:absolute; width:100%; height:100%; margin:0px; padding:0px;
}
.poster { z-index:9; list-style:none; width:20%; height:20px; position:relative; float:left; overflow:hidden; cursor:pointer; display: table; }
.image { position:absolute; width:100%; height:100%; background-size:cover; background-position:50% 50%; transition: all 0.66s ease; -webkit-transition: all 0.66s ease; }
span { display: table-cell; text-align: center; vertical-align: middle; visibility:hidden; opacity:0.0; color:#fff; font-size:1em; z-index:3; transition: all 1s ease; -webkit-transition: all 1s ease; }
.revealed { visibility:visible; opacity:1.0; }
/* Blown Animation ———– */
.blown { -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); filter: grayscale(100%); z-index:-1 !important; -webkit-transform:scale(1.2); transform:scale(1.2); opacity:1.0;	}

Fluid poster wall - Script Codes JS Codes

$(window).resize(function() { ResizePosters();
});
$(document).ready(function() { ResizePosters(); $('span').append('<br><i class="fa fa-check fa-3x"></i>'); $(".poster").swipe( { tap:function(event, target) { $('.image', this).toggleClass('blown'); $('span', this).toggleClass('revealed'); }, threshold:50 });
});
function ResizePosters() { var $posterwidth = $('.poster').width(); $('.poster').css('height',$posterwidth); }
Fluid poster wall - Script Codes
Fluid poster wall - Script Codes
Home Page Home
Developer Joseph
Username jibbon
Uploaded November 21, 2022
Rating 3
Size 2,856 Kb
Views 16,192
Do you need developer help for Fluid poster wall?

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!

Joseph (jibbon) Script Codes
Name
Fluid full-width vimeo element
Mousy canvas experiment
A Pen by Joseph
Dragdealer slider
Simple responsive fullscreen slider
NEW SPACE COLONY
Css only parallax
3d transform card flip
Large canvas mousemove experiment
NEW SPACE COLONY - safe
Create amazing video scripts 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!