Can someone make my card slider workable by click on arrows?

Can someone make my card slider workable by click on arrows? - javascript

Hope you are doing well! I want to make my card slider work by clicking on arrows. It is already working when we click next or prev card. but I want to make it work by clicking on arrows too. click left icon to go left or click the right icon to go right card.
Is it possible to make arrows work?
Thankyou for help.
$num = $('.my-card').length;
$even = $num / 2;
$odd = ($num + 1) / 2;
if ($num % 2 == 0) {
$('.my-card:nth-child(' + $even + ')').addClass('active');
$('.my-card:nth-child(' + $even + ')').prev().addClass('prev');
$('.my-card:nth-child(' + $even + ')').next().addClass('next');
} else {
$('.my-card:nth-child(' + $odd + ')').addClass('active');
$('.my-card:nth-child(' + $odd + ')').prev().addClass('prev');
$('.my-card:nth-child(' + $odd + ')').next().addClass('next');
}
$('.my-card').click(function() {
$slide = $('.active').width();
console.log($('.active').position().left);
if ($(this).hasClass('next')) {
$('.card-carousel').stop(false, true).animate({left: '-=' + $slide});
} else if ($(this).hasClass('prev')) {
$('.card-carousel').stop(false, true).animate({left: '+=' + $slide});
}
$(this).removeClass('prev next');
$(this).siblings().removeClass('prev active next');
$(this).addClass('active');
$(this).prev().addClass('prev');
$(this).next().addClass('next');
});
// Keyboard nav
$('html body').keydown(function(e) {
if (e.keyCode == 37) { // left
$('.active').prev().trigger('click');
}
else if (e.keyCode == 39) { // right
$('.active').next().trigger('click');
}
});
html body {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
overflow-x: hidden;
}
.card-carousel {
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.card-carousel .my-card {
height: 400px;
width: 500px;
position: relative;
z-index: 1;
-webkit-transform: scale(0.6) translateY(-2rem);
transform: scale(0.6) translateY(-2rem);
opacity: 0;
cursor: pointer;
pointer-events: none;
background: #2e5266;
background: linear-gradient(to top, #2e5266, #6e8898);
transition: 1s;
}
.card-carousel .my-card:after {
content: '';
position: absolute;
height: 2px;
width: 100%;
border-radius: 100%;
background-color: rgba(0,0,0,0.3);
bottom: -5rem;
-webkit-filter: blur(4px);
filter: blur(4px);
}
.card-carousel .my-card:nth-child(0):before {
content: '0';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(1):before {
content: '1';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(2):before {
content: '2';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(3):before {
content: '3';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(4):before {
content: '4';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(5):before {
content: '5';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(6):before {
content: '6';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(7):before {
content: '7';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(8):before {
content: '8';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card:nth-child(9):before {
content: '9';
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
font-size: 3rem;
font-weight: 300;
color: #fff;
}
.card-carousel .my-card.active {
z-index: 3;
-webkit-transform: scale(1) translateY(0) translateX(0);
transform: scale(1) translateY(0) translateX(0);
opacity: 1;
pointer-events: auto;
transition: 1s;
}
.card-carousel .my-card.prev, .card-carousel .my-card.next {
z-index: 2;
-webkit-transform: scale(0.8) translateY(-1rem) translateX(0);
transform: scale(0.8) translateY(-1rem) translateX(0);
opacity: 0.6;
pointer-events: auto;
transition: 1s;
}
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<div class="heading">
</div>
<div class="card-carousel">
<div class="my-card"></div>
<div class="my-card"></div>
<div class="my-card"></div>
<div class="my-card"></div>
<div class="my-card"></div>
<div class="my-card"></div>
<div class="my-card"></div>
<div class="my-card"></div>
<div class="my-card"></div>
</div>
<div style="font-size:70px">
<i class="fas fa-chevron-circle-left"></i>
<i class="fas fa-chevron-circle-right"></i>
</div>
</body>
</html>

Quick answer: https://codepen.io/anon/pen/dgeaRo
Explenation:
What I did was add a class and an Id to your a items and created a Javascript method that mostly does the same as the $('.my-card').click function.
This works and should give you a general idea should you want to make changes

Related

How to get an Arrow shape on the below provided JS filddle circular progress bar

I m trying to get an Arrow shape for the below code of circular progress bar. But it seems impossible for me so far, hence my limited experience in CSS and styling.
Please help or guide me how do I get an Arrow shape at the end of the circular progress bar.
The present circular progress bar looks like this:
How I want it..
Please find the given JSfiddle link
https://jsfiddle.net/jh1s7raq/
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after, :before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
.progress{
width: 100px;
height: 100px;
line-height: 100px;
background: none;
margin: 0;
box-shadow: none;
position: relative;
}
.progress:after{
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress > span{
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress .progress-left{
left: 0;
}
.progress .progress-bar{
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar{
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right{
right: 0;
}
.progress .progress-right .progress-bar{
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value{
width: 90%;
height: 90%;
border-radius: 50%;
background: white;
font-size: 20px;
color: #012C52;
line-height: 100px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar{
border-color: #012C52;
}
.progress.blue .progress-left .progress-bar{
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar{
border-color: #fdba04;
}
.progress.yellow .progress-left .progress-bar{
animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar{
border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar{
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar{
border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar{
animation: loading-5 1.2s linear forwards 1.8s;
}
#keyframes loading-1{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5{
0%{
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100%{
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px){
.progress{ margin-bottom: 20px; }
}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="progress blue" style="margin-top:50px;">
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
</div>
</div>
Please let me know if I m not clear on my question... Thanks

You have to add markup in your html for arrow element like
<span class="arrow"></span>
And then add css for it
.progress>span.arrow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
animation: rotate 3.3s linear forwards;
}
.progress>span.arrow:after {
content: "";
border-width: 16px;
border-style: solid;
border-color: transparent transparent transparent #ff0000;
position: absolute;
left: 50px;
top: -8px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(324deg)
}
}
Check working example below. let me know if you have any doubts on it
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
:after,
:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
line-height: 1.428571429;
color: #333333;
background-color: #ffffff;
}
.progress {
width: 100px;
height: 100px;
line-height: 100px;
background: none;
margin: 0;
box-shadow: none;
position: relative;
}
.progress:after {
content: "";
width: 100%;
height: 100%;
border-radius: 50%;
border: 12px solid #fff;
position: absolute;
top: 0;
left: 0;
}
.progress>span:not(.arrow) {
width: 50%;
height: 100%;
overflow: hidden;
position: absolute;
top: 0;
z-index: 1;
}
.progress>span.arrow {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 9;
animation: rotate 3.3s linear forwards;
}
.progress>span.arrow:after {
content: "";
border-width: 16px;
border-style: solid;
border-color: transparent transparent transparent #ff0000;
position: absolute;
left: 50px;
top: -8px;
}
#keyframes rotate {
from {
transform: rotate(0deg)
}
to {
transform: rotate(324deg)
}
}
.progress .progress-left {
left: 0;
}
.progress .progress-bar {
width: 100%;
height: 100%;
background: none;
border-width: 12px;
border-style: solid;
position: absolute;
top: 0;
}
.progress .progress-left .progress-bar {
left: 100%;
border-top-right-radius: 80px;
border-bottom-right-radius: 80px;
border-left: 0;
-webkit-transform-origin: center left;
transform-origin: center left;
}
.progress .progress-right {
right: 0;
}
.progress .progress-right .progress-bar {
left: -100%;
border-top-left-radius: 80px;
border-bottom-left-radius: 80px;
border-right: 0;
-webkit-transform-origin: center right;
transform-origin: center right;
animation: loading-1 1.8s linear forwards;
}
.progress .progress-value {
width: 90%;
height: 90%;
border-radius: 50%;
background: white;
font-size: 20px;
color: #012C52;
line-height: 100px;
text-align: center;
position: absolute;
top: 5%;
left: 5%;
}
.progress.blue .progress-bar {
border-color: #012C52;
}
.progress.blue .progress-left .progress-bar {
animation: loading-2 1.5s linear forwards 1.8s;
}
.progress.yellow .progress-bar {
border-color: #fdba04;
}
.progress.yellow .progress-left .progress-bar {
animation: loading-3 1s linear forwards 1.8s;
}
.progress.pink .progress-bar {
border-color: #ed687c;
}
.progress.pink .progress-left .progress-bar {
animation: loading-4 0.4s linear forwards 1.8s;
}
.progress.green .progress-bar {
border-color: #1abc9c;
}
.progress.green .progress-left .progress-bar {
animation: loading-5 1.2s linear forwards 1.8s;
}
#keyframes loading-1 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
}
#keyframes loading-2 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(144deg);
transform: rotate(144deg);
}
}
#keyframes loading-3 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
}
#keyframes loading-4 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(36deg);
transform: rotate(36deg);
}
}
#keyframes loading-5 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(126deg);
transform: rotate(126deg);
}
}
#media only screen and (max-width: 990px) {
.progress {
margin-bottom: 20px;
}
}
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="progress blue" style="margin:50px;">
<span class="arrow"></span>
<span class="progress-left">
<span class="progress-bar"></span>
</span>
<span class="progress-right">
<span class="progress-bar"></span>
</span>
<div class="progress-value">90%</div>
</div>
</div>
</div>
</div>
Fiddle link: https://jsfiddle.net/jh1s7raq/1/

How to take off the y-overflow?

I am trying to build a vertical tab system. I have several problems yet, but I am having problems with it without overflowing in y position.
I believe I am not working out well with the content part.
<div class="content">
<h3 class="heading">Tab 4 Content</h3>
<p class="description">Lorem cumque.</p>
// ----------------- Variables
wrapper = $(".tabs");
tabs = wrapper.find(".nav-tab");
tabToggle = wrapper.find(".tab-toggle");
// ----------------- Functions
function openTab() {
var content = $(this).parent().next(".content"),
activeItems = wrapper.find(".active");
if (!$(this).hasClass('active')) {
$(this).add(content).add(activeItems).toggleClass('active');
wrapper.css('min-height', content.outerHeight());
}
};
// ----------------- Interactions
tabToggle.on('click', openTab);
// ----------------- Constructor functions
$(window).load(function() {
tabToggle.first().trigger('click');
});
button,
.button {
position: relative;
display: inline-block;
color: white;
padding: 0.75rem 2rem;
margin: 0 auto;
background-color: #374d72;
border: none;
width: 100%;
font-weight: bold;
font-size: 1.2rem;
text-align: center;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
button:hover,
.button:hover {
background-color: #374d72;
}
button:hover:before,
button:hover:after,
.button:hover:before,
.button:hover:after {
color: #4cc4cf;
}
button:after,
button:before,
.button:after,
.button:before {
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* ---------------------- Vertical Tabs */
.tabs {
position: relative;
min-height: 0;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
transition: all 0.5s;
/* ---------------------- Tab */
/* ---------------------- Content */
}
.tabs .nav-tab {
margin-bottom: 1px;
/* ---------------------- Tab Toggle */
}
#media screen and (min-width: 10rem) {
.tabs .nav-tab {
float: left;
clear: left;
width: 30%;
}
}
.tabs .nav-tab .tab-toggle {
padding: 1rem 4rem 1rem 2rem;
position: relative;
outline: none;
width: 100%;
}
#media screen and (min-width: 10rem) {
.tabs .nav-tab .tab-toggle {
text-align: left;
}
}
.tabs .nav-tab .tab-toggle:after {
content: "\25BC";
position: absolute;
display: block;
right: 2rem;
top: 50%;
-webkit-transform: rotate(0deg) translateY(-50%);
-moz-transform: rotate(0deg) translateY(-50%);
-ms-transform: rotate(0deg) translateY(-50%);
-o-transform: rotate(0deg) translateY(-50%);
transform: rotate(0deg) translateY(-50%);
}
#media screen and (min-width: 10rem) {
.tabs .nav-tab .tab-toggle:after {
-webkit-transform: rotate(-90deg) translateX(50%);
-moz-transform: rotate(-90deg) translateX(50%);
-ms-transform: rotate(-90deg) translateX(50%);
-o-transform: rotate(-90deg) translateX(50%);
transform: rotate(-90deg) translateX(50%);
}
}
.tabs .nav-tab .tab-toggle.active {
color: #8099c2;
background-color: white;
cursor: default;
}
.tabs .nav-tab .tab-toggle.active:after {
color: #8099c2;
-webkit-transform: rotate(180deg) translateY(50%);
-moz-transform: rotate(180deg) translateY(50%);
-ms-transform: rotate(180deg) translateY(50%);
-o-transform: rotate(180deg) translateY(50%);
transform: rotate(180deg) translateY(50%);
}
#media screen and (min-width: 10rem) {
.tabs .nav-tab .tab-toggle.active:after {
-webkit-transform: rotate(-90deg) translateX(50%) translateY(0);
-moz-transform: rotate(-90deg) translateX(50%) translateY(0);
-ms-transform: rotate(-90deg) translateX(50%) translateY(0);
-o-transform: rotate(-90deg) translateX(50%) translateY(0);
transform: rotate(-90deg) translateX(50%) translateY(0);
right: 1rem;
}
}
.tabs .content {
max-height: 0;
overflow: hidden;
background-color: #efefef;
}
#media screen and (min-width: 10rem) {
.tabs .content {
max-height: none;
position: absolute;
right: 0;
top: 0;
width: 70%;
opacity: 0;
padding: 0rem 2rem 2rem 2rem;
-webkit-transform: translateX(100%);
-moz-transform: translateX(100%);
-ms-transform: translateX(100%);
-o-transform: translateX(100%);
transform: translateX(100%);
}
}
.tabs .content.active {
max-height: 1000px;
}
#media screen and (min-width: 10rem) {
.tabs .content.active {
max-height: none;
opacity: 1;
-webkit-transform: none;
-moz-transform: none;
-ms-transform: none;
-o-transform: none;
transform: none;
}
}
.tabs .content>.heading {
font-size: 1.5rem;
margin-bottom: 1rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" />
<div class="container-fluid">
<div class="row">
<div class="tabs">
<div class="nav-tab">
<button class="tab-toggle">Tab 1</button>
</div>
<div class="content">
<h3 class="heading">Tab 1 Content</h3>
<p class="description">Lorem cumque.</p>
</div>
<div class="nav-tab">
<button class="tab-toggle">Tab 2</button>
</div>
<div class="content">
<h3 class="heading">Tab 2 Content</h3>
<p class="description">Lorem cumque.</p>
</div>
</div>
</div>
</div>
I made it full width, but dont want it overflowing

How to flip a page rectangular div element [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
Please, how do i flip a div element just as it was done here https://hyperiondev.com

Try this
https://jsfiddle.net/dhruv1992/m9xwg2ws/
HTML
<div class="flip-container">
<div class="flipper">
<div class="front">
<span class="name">Dhruv Gupta</span>
</div>
<div class="back">
<div class="back-logo"></div>
<div class="back-title">Dhruv Gupta</div>
<p>Javascript Fanatic, CSS Tinkerer, PHP Hacker, and web lover.</p>
</div>
</div>
</div>
CSS code
.flip-container {
-webkit-perspective: 1000;
-moz-perspective: 1000;
-o-perspective: 1000;
perspective: 1000;
border: 1px solid #ccc;
}
.flip-container:hover .flipper,
.flip-container.hover .flipper {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container, .front, .back {
width: 320px;
height: 427px;
}
.flipper {
-webkit-transition: 0.6s;
-webkit-transform-style: preserve-3d;
-moz-transition: 0.6s;
-moz-transform-style: preserve-3d;
-o-transition: 0.6s;
-o-transform-style: preserve-3d;
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
top: 0;
left: 0;
}
.front {
background: url(https://s-media-cache-ak0.pinimg.com/736x/f8/57/06/f85706c5f5e0b974a533ad6c8d1af258.jpg) 0 0 no-repeat;
z-index: 2;
}
.back {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
background: #f8f8f8;
}
.front .name {
font-size: 2em;
display: inline-block;
background: rgba(33, 33, 33, 0.9);
color: #f8f8f8;
font-family: Courier;
padding: 5px 10px;
border-radius: 5px;
bottom: 60px;
left: 25%;
position: absolute;
text-shadow: 0.1em 0.1em 0.05em #333;
-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);
transform: rotate(-20deg);
}
.back-logo {
position: absolute;
top: 40px;
left: 90px;
width: 160px;
height: 117px;
background: url(https://s-media-cache-ak0.pinimg.com/736x/f8/57/06/f85706c5f5e0b974a533ad6c8d1af258.jpg) 0 0 no-repeat;
}
.back-title {
font-weight: bold;
color: #00304a;
position: absolute;
top: 180px;
left: 0;
right: 0;
text-align: center;
text-shadow: 0.1em 0.1em 0.05em #acd7e5;
font-family: Courier;
font-size: 2em;
}
.back p {
position: absolute;
bottom: 40px;
left: 0;
right: 0;
text-align: center;
padding: 0 20px;
font-family: arial;
line-height: 2em;
}

Using CSS and JQuery to animate a hexagon

I created a CSS hexagon using 3 divs and border colors and sizes. I would like to animate that hexagon by flipping it on it's x-axis and getting a new css hexagon like my code, below.
That all works in CSS. But then I want the new div to scale to 2x after the flip.
The CSS transform property does everything at once so I'm trying to scale after that using jQuery animate. If possible I would be open to doing everything in jQuery.
* {
box-sizing: border-box;
}
.hexagons {
width: 1100px;
letter-spacing: 0;
font-size: 0;
margin: 0 auto;
}
.hexagon-holder {
position: relative;
margin: 0 21.5px;
width: 226px;
height: 130.48px;
display: inline-block;
letter-spacing: 0;
font-size: 0;
}
.hexagon {
position: relative;
width: 226px;
height: 130.48px;
background-image: url(http://csshexagon.com/img/meow.jpg);
background-size: auto 258.6529px;
background-position: center;
border-left: solid 1px #333333;
border-right: solid 1px #333333;
display: inline-block;
z-index: 1;
}
.hexagon .hexTop,
.hexagon .hexBottom {
position: absolute;
z-index: 1;
width: 159.81px;
height: 159.81px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 32.10px;
-webkit-backface-visibility: hidden
}
/*counter transform the bg image on the caps*/
.hexagon .hexTop:after,
.hexagon .hexBottom:after {
content: "";
position: absolute;
width: 224.0000px;
height: 129.32646029847618px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-64.6632px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-64.6632px);
transform: rotate(45deg) scaleY(1.7321) translateY(-64.6632px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexagon .hexTop {
top: -79.9031px;
border-top: solid 1.4142px #333333;
border-right: solid 1.4142px #333333;
}
.hexagon .hexTop:after {
background-position: center top;
}
.hexagon .hexBottom {
bottom: -79.9031px;
border-bottom: solid 1.4142px #333333;
border-left: solid 1.4142px #333333;
}
.hexagon .hexBottom:after {
background-position: center bottom;
}
.hexagon:after {
content: "";
position: absolute;
top: 0.5774px;
left: 0;
width: 224.0000px;
height: 129.3265px;
z-index: 2;
background: inherit;
}
.hexagon:nth-child(7n-2) {
margin-left: 156px;
}
.hexagon:nth-child(n+5) {
margin-top: 29px;
}
.hexText {
position: absolute;
left: 0;
top: 0;
z-index: 3;
color: #000;
opacity: 1;
font-size: 20px;
text-align: center;
width: 100%;
color: #fff;
}
/* entire container, keeps perspective */
.flip-container {
perspective: 1000;
transform-style: preserve-3d;
width: 226px;
height: 280.48px !important;
background: transparent;
}
/* UPDATED! flip the pane when hovered */
.flip-container:hover .back {
transform: rotateY(0deg);
}
.flip-container:hover .front {
transform: rotateY(180deg);
}
.flip-container,
.front,
.back {
width: 226px;
height: auto;
}
/* flip speed goes here */
.flipper {
transition: 0.6s;
transform-style: preserve-3d;
position: relative;
top: 75px;
}
/* hide back of pane during swap */
.front,
.back {
backface-visibility: hidden;
transition: 0.6s;
transform-style: preserve-3d;
position: absolute;
top: 0;
left: 0;
}
/* UPDATED! front pane, placed above back */
.front {
z-index: 2;
transform: rotateY(0deg);
}
/* back, initially hidden pane */
.back {
transform: rotateY(-180deg);
}
/*
Some vertical flip updates
*/
.vertical.flip-container {
position: relative;
}
.vertical .back {
transform: rotateX(180deg);
}
.vertical.flip-container:hover .back {
transform: rotateX(0deg);
}
.vertical.flip-container:hover .front {
transform: rotateX(180deg);
}
.hexagon-overlay {
position: absolute;
width: 226px;
height: 130.48px;
margin: 0;
background-color: teal;
background-size: auto 247.1059px;
background-position: center;
border-left: solid 6px #333333;
border-right: solid 6px #333333;
opacity: .7;
z-index: 3;
top: 0;
left: 0;
}
.hexagon-overlay .hexTop,
.hexagon-overlay .hexBottom {
position: absolute;
z-index: 1;
width: 159.81px;
height: 159.81px;
overflow: hidden;
-webkit-transform: scaleY(0.5774) rotate(-45deg);
-ms-transform: scaleY(0.5774) rotate(-45deg);
transform: scaleY(0.5774) rotate(-45deg);
background: inherit;
left: 27.10px;
}
/*counter transform the bg image on the caps*/
.hexagon-overlay .hexTop:after,
.hexagon-overlay .hexBottom:after {
content: "";
position: absolute;
width: 214.0000px;
height: 123.55295760657991px;
-webkit-transform: rotate(45deg) scaleY(1.7321) translateY(-61.7765px);
-ms-transform: rotate(45deg) scaleY(1.7321) translateY(-61.7765px);
transform: rotate(45deg) scaleY(1.7321) translateY(-61.7765px);
-webkit-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
background: inherit;
}
.hexagon-overlay .hexTop {
top: -79.9031px;
border-top: solid 8.4853px #333333;
border-right: solid 8.4853px #333333;
}
.hexagon-overlay .hexTop:after {
background-position: center top;
}
.hexagon-overlay .hexBottom {
bottom: -79.9031px;
border-bottom: solid 8.4853px #333333;
border-left: solid 8.4853px #333333;
}
.hexagon-overlay .hexBottom:after {
background-position: center bottom;
}
.hexagon-overlay .hexagon:after {
content: "";
position: absolute;
top: 3.4641px;
left: 0;
width: 214.0000px;
height: 123.5530px;
z-index: 2;
background: inherit;
}
<div class="hexagons">
<div class="hexagon-holder flip-container" ontouchstart="this.classList.toggle('hover');">>
<div class="flipper">
<div class="front">
<div class="hexagon">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
</div>
<div class="back">
<div class="hexagon-overlay">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
<div class="hexText">LifePoint Dental
<br />+</div>
<div class="hexagon" style="transform:scaleX(-1);">
<div class="hexTop"></div>
<div class="hexBottom"></div>
</div>
</div>
</div>
</div>
</div>
View on Codepen

How to draw heart with text in middle?

I found this answer "css: how to draw circle with text in middle?" , but I need the same, but with a heart shape. I found a lot of heart shape figures online, but none of this with text inside. At the same time, I need the heart only with borders, and when click, filled the background.
My code until now:
.heart {
width: 100px;
height: 90px;
font-size: 50px;
color: #fff;
line-height: 100px;
text-align: center;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div class="heart">Heart</div>

In order to get text to appear on the heart, you need to set the heart container as relative and the text inside of it as absolute as shown below.
I set the border of the :before and :after to give the heart a border.
The toggling of the fill uses functionality from YouMightNotNeedJQuery.com.
function toggleFill(heart, className) {
if (!hasClass(heart, className)) {
addClass(heart, className);
} else {
removeClass(heart, className);
}
}
function addClass(el, className) {
if (el.classList) {
el.classList.add(className);
} else {
el.className += ' ' + className;
}
}
function removeClass(el, className) {
if (el.classList) {
el.classList.remove(className);
} else {
el.className = el.className.replace(
new RegExp('(^|\\b)' + className.split(' ').join('|') +
'(\\b|$)', 'gi'), ' ');
}
}
function hasClass(el, className) {
if (el.classList) {
return el.classList.contains(className);
} else {
return new RegExp('(^| )' + className +
'( |$)', 'gi').test(el.className);
}
}
.unselectable {
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.filled:before,
.filled:after {
background: red !important;
}
#wrapper {
width: 300px;
height: 180px;
background: #444;
}
.heart {
position: relative;
top: calc(50% - 45px); /* 1/2 height of wrapper - 1/2 height of heart */
left: calc(50% - 50px); /* 1/2 width of wrapper - 1/2 width of heart */
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
top: 0px;
width: 50px;
height: 80px;
background: inherit;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
}
.heart:before {
left: 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
border-left: 2px solid red;
border-top: 2px solid red;
border-bottom: 1px solid red;
}
.heart:after {
left: 0px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
border-right: 2px solid red;
border-top: 2px solid red;
border-bottom: 1px solid red;
}
.heart-text {
position: absolute;
top: 0;
left: calc(50px - 30px); /* 1/2 width of heart - 1/2 width of text */
z-index: 100;
line-height: 66px;
text-align: center;
font-size: 24px;
font-weight: bold;
color: #FFF;
}
<div id="wrapper">
<div class="heart" onclick="toggleFill(this, 'filled')">
<div class="heart-text unselectable">
Heart
</div>
</div>
</div>

A quick search and there is a good article about creating shapes with CSS over # css-tricks.com that can be seen here.
If we take the example of how to create a heart and extend upon it a little we can get the following snippet that gives you a heart that starts out simply as a border;
(function(){
var heart = document.querySelector('#heart');
heart.addEventListener('click', function(e) {
this.className += ' is--filled'
});
}());
#heart {
position: relative;
width: 100px;
height: 90px;
text-align: center;
font-size: 16px;
position: relative;
}
#heart span {
width: 100%;
display: block;
top: 50%;
margin-top: -16px;
line-height: 16px;
left: 0;
right: 0;
position: absolute;
z-index: 1;
}
#heart.is--filled:before,
#heart.is--filled:after {
background-color: red;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
border: 1px solid red;
transition: background-color .25s ease 0s;
-webkit-transition: background-color .25s ease 0s;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin :100% 100%;
}
#heart:before {
border-right: none;
border-bottom: none;
}
#heart:after {
border-left: none;
border-bottom: none;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<div id='heart'>
<span>Hey</span>
</div>
</body>
</html>
However, as someone else has mentioned in the comments it may be an easier approach to use images or the canvas element. I say this purely because it may prove difficult to get just the heart border you desire before clicking the heart (easier to see if you run the snippet). You could opt for much softer opaque background color before you click and then transition to red maybe?
Hope this helps you out!

Use pseudo elements of css3.
.text {
position: absolute;
color: #eee;
z-index: 99;
top: 40%;
left: 50%;
transform: translate(-50%, -50%);
}
#heart {
position: relative;
width: 100px;
height: 90px;
}
#heart:before,
#heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
#heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<div id="heart">
<div class="text">ABC</div>
</div>

Use this
HTML
$('#change').click(function() {
var className = $(this).attr('class');
if(className == "heart"){
$(this).removeClass('heart');
$(this).addClass('heart1');
}
else{
$(this).removeClass('heart1');
$(this).addClass('heart');
}
});
.txt{
z-index:1;
font-size: 20px;
color: #000;
position:relative;
text-align:center;
top:15px;
right:5px;
}
.heart {
width: 100px;
height: 90px;
}
.heart1 {
width: 100px;
height: 90px;
}
.heart:before,
.heart:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: yellow;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart1:before,
.heart1:after {
position: absolute;
content: "";
left: 50px;
top: 0;
width: 50px;
height: 80px;
background: red;
-moz-border-radius: 50px 50px 0 0;
border-radius: 50px 50px 0 0;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.heart1:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
.heart:after {
left: 0;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transform-origin: 100% 100%;
-moz-transform-origin: 100% 100%;
-ms-transform-origin: 100% 100%;
-o-transform-origin: 100% 100%;
transform-origin: 100% 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="change" class="heart"><div class="txt">Heart</div></div>

We Keep Coding

JavaScript is the programming language of the Web.

Can someone make my card slider workable by click on arrows? - javascript

Quick answer: https://codepen.io/anon/pen/dgeaRo Explenation: What I did was add a class and an Id to your a items and created a Javascript method that mostly does the same as the $('.my-card').click function. This works and should give you a general idea should you want to make changes

Related

How to get an Arrow shape on the below provided JS filddle circular progress bar

How to take off the y-overflow?

How to flip a page rectangular div element [closed]

Using CSS and JQuery to animate a hexagon

How to draw heart with text in middle?

Categories

Resources