A Pen by Sylvain Reucherand

Developer
Sylvain Reucherand
Size
3,847 Kb
Views
14,168
  1. A Pen by Sylvain Reucherand Previews
  2. A Pen by Sylvain Reucherand HTML Codes
  3. A Pen by Sylvain Reucherand CSS Codes
  4. A Pen by Sylvain Reucherand JS Codes

How do I make an a pen by sylvain reucherand?

What is a a pen by sylvain reucherand? How do you make a a pen by sylvain reucherand? This script and codes were developed by Sylvain Reucherand on 07 November 2022, Monday.

A Pen by Sylvain Reucherand Previews
IQ Test

A Pen by Sylvain Reucherand - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Sylvain Reucherand</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <nav class='initial-state'> <ul class='bullets'> <li class='bullet bullet--1 active'> <a class='bullet__wrapper-link' href='#'> <span class='bullet__text'>Item sympa 1</span> <span class='bullet__shape'></span> </a> </li> <li class='bullet bullet--2'> <a class='bullet__wrapper-link' href='#'> <span class='bullet__text'>Item sympa 2</span> <span class='bullet__shape'></span> </a> </li> <li class='bullet bullet--3'> <a class='bullet__wrapper-link' href='#'> <span class='bullet__text'>Item sympa 3</span> <span class='bullet__shape'></span> </a> </li> <li class='bullet bullet--4'> <a class='bullet__wrapper-link' href='#'> <span class='bullet__text'>Item sympa 4</span> <span class='bullet__shape'></span> </a> </li> <li class='bullet bullet--5'> <a class='bullet__wrapper-link' href='#'> <span class='bullet__text'>Item sympa 5</span> <span class='bullet__shape'></span> </a> </li> </ul>
</nav> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Sylvain Reucherand - Script Codes CSS Codes

body { background-color: #343434; -webkit-font-smoothing: antialiased;
}
ul { width: 50%; padding: 0; list-style: none; margin: 0 auto; margin-top: 100px;
}
ul.bullets:after { content: ''; display: block; clear: both;
}
.bullets .bullet { position: relative; width: 20%; float: left; text-align: center;
}
.bullet .bullet__wrapper-link { display: block; width: 30px; height: 30px; margin: 0 auto; text-decoration: none; color: #ffffff; border-radius: 100%;
}
.bullet .bullet__wrapper-link span { display: block; position: absolute;
}
.bullet .bullet__wrapper-link .bullet__text { width: 100%; top: -30px; left: 50%; margin-left: -50%; font-family: Avenir, sans-serif; font-size: 12px; text-transform: uppercase; opacity: 0; pointer-events: none; -webkit-transition: all 250ms cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 250ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 250ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform: translateY(-10px); -moz-transform: translateY(-10px); -ms-transform: translateY(-10px); -o-transform: translateY(-10px); transform: translateY(-10px);
}
.bullet .bullet__wrapper-link:hover .bullet__text { opacity: 1; -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0);
}
.bullet .bullet__wrapper-link .bullet__shape { top: 0; bottom: 0; left: 0; right: 0; margin: auto; width: 8px; height: 8px; -webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg);
}
.bullet .bullet__wrapper-link .bullet__shape:before,
.bullet .bullet__wrapper-link .bullet__shape:after { content: ''; display: block;
}
.bullet .bullet__wrapper-link .bullet__shape:before { width: inherit; height: inherit; background-color: #ffffff; -webkit-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); -moz-transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); transition: all 500ms cubic-bezier(0.19, 1, 0.22, 1); -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);
}
.bullet.active .bullet__wrapper-link .bullet__shape:before,
.bullet .bullet__wrapper-link:hover .bullet__shape:before { -webkit-transform: scale(1.2); -moz-transform: scale(1.2); -ms-transform: scale(1.2); -o-transform: scale(1.2); transform: scale(1.2);
}
.bullet .bullet__wrapper-link .bullet__shape:after { position: absolute; width: 22px; height: 22px; top: 50%; left: 50%; border: 1px solid #ffffff; -webkit-transition: -webkit-transform 400ms cubic-bezier(0.19, 1, 0.22, 1) 100ms; -moz-transition: -moz-transform 400ms cubic-bezier(0.19, 1, 0.22, 1) 100ms; transition: transform 400ms cubic-bezier(0.19, 1, 0.22, 1) 100ms; -webkit-transform: translateX(-50%) translateY(-50%) scale(0); -moz-transform: translateX(-50%) translateY(-50%) scale(0); -ms-transform: translateX(-50%) translateY(-50%) scale(0); -o-transform: translateX(-50%) translateY(-50%) scale(0); transform: translateX(-50%) translateY(-50%) scale(0);
}
.bullet.active .bullet__wrapper-link .bullet__shape:after { -webkit-transform: translateX(-50%) translateY(-50%) scale(1); -moz-transform: translateX(-50%) translateY(-50%) scale(1); -ms-transform: translateX(-50%) translateY(-50%) scale(1); -o-transform: translateX(-50%) translateY(-50%) scale(1); transform: translateX(-50%) translateY(-50%) scale(1);
}
.bullet.reset .bullet__wrapper-link .bullet__shape { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
.initial-state .bullet .bullet__wrapper-link .bullet__shape { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg);
}
.initial-state .bullet .bullet__wrapper-link .bullet__shape:before { -webkit-transform: scale(0); -moz-transform: scale(0); -ms-transform: scale(0); -o-transform: scale(0); transform: scale(0);
}
.initial-state .bullet .bullet__wrapper-link .bullet__shape:after { -webkit-transform: translateX(-50%) translateY(-50%) scale(0); -moz-transform: translateX(-50%) translateY(-50%) scale(0); -ms-transform: translateX(-50%) translateY(-50%) scale(0); -o-transform: translateX(-50%) translateY(-50%) scale(0); transform: translateX(-50%) translateY(-50%) scale(0);
}

A Pen by Sylvain Reucherand - Script Codes JS Codes

setTimeout(function () { $('nav').removeClass('initial-state'); $('.bullet .bullet__shape').each(function (i, bullet) { $(this).css('transitionDelay', (i * 100) + 'ms') }); $('.bullet .bullet__wrapper-link').on('click', function (evt) { $('.bullet .bullet__shape').each(function (i, bullet) { $(this).css('transitionDelay', '0ms') }); $('.bullet').removeClass('active'); var t = $(this); $(this).parent().addClass('reset'); setTimeout(function () { t.parent().removeClass('reset'); t.parent().addClass('active'); }, 0); evt.preventDefault(); });
}, 1000); //coucoutrret
A Pen by Sylvain Reucherand - Script Codes
A Pen by Sylvain Reucherand - Script Codes
Home Page Home
Developer Sylvain Reucherand
Username sreucherand
Uploaded November 07, 2022
Rating 3
Size 3,847 Kb
Views 14,168
Do you need developer help for A Pen by Sylvain Reucherand?

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!

Sylvain Reucherand (sreucherand) Script Codes
Name
Closest point of a polygon to another point
Mousewheel indicator animation
Blurred text
UI Buttons animation
Spinner
Flower expansion
Create amazing captions 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!