Sorting with morphing content

Developer
Robert Borghesi
Size
2,387 Kb
Views
28,336
  1. Sorting with morphing content Previews
  2. Sorting with morphing content HTML Codes
  3. Sorting with morphing content CSS Codes
  4. Sorting with morphing content JS Codes

How do I make an sorting with morphing content?

A simple and clean way to sort/filter the items.. What is a sorting with morphing content? How do you make a sorting with morphing content? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.

Sorting with morphing content Previews
IQ Test

Sorting with morphing content - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sorting with morphing content</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="box"> <div class="content"> <div class="title">Choose your sport</div> <ul> <li><div class="item" data-sport="Soccer">Soccer</div></li> <li><div class="item" data-sport="Basket">Basket</div></li> <li><div class="item" data-sport="Golf">Golf</div></li> <li><div class="item" data-sport="Cycling">Cycling</div></li> <li><div class="item" data-sport="Curling">Curling</div></li> </ul> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sorting with morphing content - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Raleway:400,700);
*{ box-sizing: border-box;
}
html, body{ background-color: rgb(50,50,50); font-family: 'Raleway', sans-serif; color: white;
}
.box{ height: 400px; margin: 50px auto 0 auto; width:200px;
}
.content{ height: 60px; width: 200px; background: #c56667; border-radius: 5px; position: relative; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); transition: all 0.2s; overflow:hidden;
}
.content_active{ height: 220px; border-radius:0px;
}
.title{ font-weight: 700; position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); padding-left:15px; transition: all 0.5s; z-index: 100; cursor: pointer;
}
.title_left{ margin-left: -200px; z-index:0;
}
ul{ list-style-type: none; position: absolute; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); margin: 0; width: 160px;
}
ul li{ height: 40px; font-weight: 700; overflow: hidden; width:100%;
}
li div{ position: relative; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); left:60px; transition: all 0.3s; with: 100%; opacity: 0; cursor: pointer;
}
.active_item{	left: 0px; opacity: 1;
}

Sorting with morphing content - Script Codes JS Codes

$(document).ready(function(){ var sport; $(".title").click(function(){ $(".title").addClass("title_left"); $(".content").addClass("content_active"); $('li').each(function(i,el){ setTimeout(function () {	$(el).find(".item").addClass("active_item");	}, i*90); }); }); $(".item").click(function(){ $(".title").removeClass("title_left"); $(".content").removeClass("content_active"); $(".item").removeClass("active_item"); sport = $(this).attr("data-sport"); $('.title').text(sport); });
});
Sorting with morphing content - Script Codes
Sorting with morphing content - Script Codes
Home Page Home
Developer Robert Borghesi
Username dghez
Uploaded August 27, 2022
Rating 3
Size 2,387 Kb
Views 28,336
Do you need developer help for Sorting with morphing content?

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!

Robert Borghesi (dghez) Script Codes
Name
Easy parallax header
Anaglyph 3D with CSS-blend on mouseMove
Opening with auto typing responsive sentences with random background color loop
Continuous scrolling background of sticky header
Best 3 players on fifa 14 - HOVER THEM
Simple PureCss dropdown menu with following subnav
Opening animation from circular avatar
Fullscreen slice hero slider
SlamDunk Parallax on MouseMove
Gradient border on hover - Scorer of fifa world cup
Create amazing love letters 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!