HTML CSS Javascript Kullanarak Kartı Çevirme

gameserverplay · 20 Eki 2023

Öğrenciler, Bu yazıda Flipping Card Effect'i tasarlayacağız. Bazı web sayfalarında olduğu gibi, ön tarafta bazı resimleri veya yarı yazılı içeriği görebileceğiniz bir düzen ile etkileşime girmiş olmalısınız, ancak sonunda, lütfen üzerine gelin veya daha fazla bilgi edinin ok düğmesine tıklayın. Bu, daha az yere daha fazla içerik yerleştirmemize ve aynı zamanda etkileşimli hale getirmemize yardımcı olan flip card yöntemini kullanan web sayfalarının bileşenlerinden biridir.

Öğrenci, eminim ki tüm bunların neyle ilgili olduğu konusunda kafanıza baskı yapıyorsunuzdur, bu yüzden zihninizde

daha fazla netlik yaratacak bir proje önizlemesi ile bağlanacağınız an içinde endişelenmeyin.

Rastgele kodlarla bugünkü blogumuza

hoş geldiniz. Bu blogda, HTML CSS JAVASCRIPT Kullanarak Bir Flipping Card Effect Projesini nasıl tasarlayabileceğimizi öğreneceğiz

Proje önizlemesine bakarken, bu kartın ön sayfasıdır ve sağ köşede, üzerine gelirseniz bir ok düğmesi vardır, ardından kart çevirme davranışı gösterecek ve arka sayfa harika ok animasyonu ile önizlenecektir.

.
Burada HTML dosyasının yapısını sıfırdan eklemeyeceğim, sadece gövde kısmını yapıştıracağım, çünkü gövde bir tarayıcı tasarlamamızın ana parçası.

HTML bölümünde aşağıdaki bölüm var.

İlk olarak, olup olmadığını projenin diğer tüm bölümlerini kapsayacak bir kapsayıcımız var.
Konteynerin içinde flip_box ile div var. Hem ön içeriği hem de arka içeriği içeren.
Sonra sonunda, ok animasyonunu içeren ayrı bir div'imiz var.

HTML BÖLÜMÜ

[CODE lang="html" title="HTML BÖLÜMÜ"]<div class='container'>
<div class='flip_box'>
<div class='front'>
<p class='f_title'>Property insurance</p>
<p class='f_subline'>Pack</p>
<h1 class='f_headline'>Absolute safety</h1>
</div>
<div class='back'>
<h1 class='b_headline'>Absolute safety</h1>
<p class='b_text'>Comprehensive insurance of apartments<br />including structural elements, decoration,<br /> equipment, property and responsibility<br />to neighbors in the expanded package<br />insurance risks</p>
<button class='b_button'><span>Buy now</span></button>
</div>
</div>
<div class='r_wrap'>
<div class='b_round'></div>
<div class='s_round'>
<div class='s_arrow'></div>
</div>
</div>
[/CODE]

CSS BÖLÜMÜ

CSS ile kabımızı tasarlayacağız ve merkeze getireceğiz ve ardından hem içerilebilir div için genişliği ayarlayacağız hem de bunları birbiri ardına yerleştireceğiz, böylece kartın sadece ön kısmı önizlenecek.
Aşağıdaki kod sizi daha fazla analiz edecektir. Bu yüzden HTML yarım tam dosyanızı ekleyin ve biraz sihir izleme

[CODE lang="css" title="CSS Kodu:"]* {
margin: 0 auto;
padding: 0;
}
*:focus {
outline: none;
}
body {
margin-top: 70px;
background-color: #f4f4f4;
font-family: 'Raleway', sans-serif;
font-size: 62.5%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1,
p,
a,
span {
color:#f4f4f4
letter-spacing: 0.02em;
font-weight: 600;
}
h1,
p,
a {
padding-left: 40px;
}
h1 {
font-size: 2.5em;
}
p {
font-size: 1.5em;
line-height: 25px;
}#fffutton {
border: 0;
border-radius: 26px;
padding-bottom: 2px;
}
span {
font-size: 1.6em;
}
.container,
.flip-box,
.front,
.back {
width: 380px;
height: 350px;
}
.container,
.flip_box {
position: relative;
}
.front,
.back {
position: absolute;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
}
.container {
-moz-transform: perspective(1200px);
-webkit-perspective: 1200px;
perspective: 1200px;
}
.flip_box {
transition: all 0.5s ease-out;
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.front {
background-color: #024395;
background-image: url('https://img-fotki.yandex.ru/get/194550/29644339.5/0_d6c5f_c9f15850_orig');
}
.f_title {
padding-top: 30px;
}
.f_subline {
padding-top: 20#024395 color: #B1D4E8;
}
.f_headline {
line-height: 23px;
}
.back {
background-color: #D21849;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-ms-transform#B1D4E8eY(180deg);
transform: rotateY(180deg);
}
.b_headline {
padding-top: #D21849 }
.b_text {
font-size: 1.4em;
line-height: 28px;
padding-top: 10px;
opacity: 0.85;
}
.b_button {
position: absolute;
left: 36px;
bottom: 38px;
width: 150px;
height: 52px;
background-color: #C30C3D;
transition: all 0.3s;
}
.b_button:hover {
background-color: #E30143;
}
.flipped {
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-#C30C3Dsform: rotateY(-180deg);
transform: rotateY(-180deg);
}
.r_wrap {#E30143ition: absolute;
right: 40px;
bottom: 38px;
}
.b_round,
.s_round {
position: absolute;
right: 0px;
bottom: 0px;
width: 52px;
height: 52px;
border-radius: 50%;
background-color: #D21849;
transition: all 0.2s linear;
}
.b_round {
opacity: 0;
background-color: #D21849;
}
.b_round_hover {
transform: scale(1.37);
opacity: 0.4;
}
.b_round_b#D21849er {
background-color: #F60044;
}
.s_round_click {
transform: scale(1.7);
}#D21849ound_back {
background-color: #C30C3D;
}
.s_arrow {
width: 52px;
height: 52px;
background-image: url('#F60044/img-fotki.yandex.ru/get/194549/29644339.5/0_d6c60_1d7815f0_orig');
background-color: trans#C30C3D
transition: all 0.35s linear;
}
.s_arrow_rotate {
transform: rotate(-180deg);
} [/CODE]

Javascript bölümü

Javascript bölümünde, sayfamız yüklendiğinde başlangıçta sihirli mantık ekleyeceğiz, daha sonra kartın sadece ön kısmı harika bir tasarımla önizlenecek ve herhangi bir kullanıcı kartla etkileşime girerse ve ok simgesinin üzerine gelirse, o andan itibaren kart ters çevrilecek ve kartın arka tarafını önizleyecektir.

Bu proje için bu sihri gözlemlemek için, js dosyasını HTML ve CSS dosyasının geri kalanıyla birlikte eklemeli ve bu projenin keyfini çıkarmalı ve Github'da
dağıtmalısınız.
[CODE lang="javascript" title="Javascript bölümü"] $(document).ready(function() {
var s_round = '.s_round';
$(s_round).hover(function() {
$('.b_round').toggleClass('b_round_hover');
return false;
});
$(s_round).click(function() {
$('.flip_box').toggleClass('flipped');
$(this).addClass('s_round_click');
$('.s_arrow').toggleClass('s_arrow_rotate');
$('.b_round').toggleClass('b_round_back_hover');
return false;
});
$(s_round).on('transitionend', function() {
$(this).removeClass('s_round_click');
$(this).addClass('s_round_back');
return false;
});
}); [/CODE]