Save
This commit is contained in:
Roman Pyrih
@@ -40,6 +40,42 @@ jQuery(function ($) {
|
||||
'transform',
|
||||
`translateX(${-scrollPosition}px)`
|
||||
)
|
||||
|
||||
hideHelpingStep(1)
|
||||
}
|
||||
|
||||
$('body').on('click', '.img-box-helping', function () {
|
||||
hideHelpingStep(2)
|
||||
})
|
||||
$('body').on('click', '.song-handler-anim', function () {
|
||||
hideHelpingStep(3)
|
||||
})
|
||||
|
||||
shouldShowHelpingStep(1)
|
||||
shouldShowHelpingStep(2)
|
||||
shouldShowHelpingStep(3)
|
||||
|
||||
function shouldShowHelpingStep(stepNumber) {
|
||||
const selector = `.helping .step-${stepNumber}`
|
||||
const storageKey = `helpingStep${stepNumber}HiddenAt`
|
||||
const lastHidden = localStorage.getItem(storageKey)
|
||||
const now = Date.now()
|
||||
|
||||
if (lastHidden && now - parseInt(lastHidden) < 24 * 60 * 60 * 1000) {
|
||||
$(selector).remove()
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
function hideHelpingStep(stepNumber) {
|
||||
const selector = `.helping .step-${stepNumber}`
|
||||
const storageKey = `helpingStep${stepNumber}HiddenAt`
|
||||
const now = Date.now()
|
||||
|
||||
$(selector).remove()
|
||||
localStorage.setItem(storageKey, now.toString())
|
||||
}
|
||||
|
||||
// gsap.to("#frame-box-content, .piano", {
|
||||
@@ -103,16 +139,19 @@ jQuery(function ($) {
|
||||
|
||||
jQuery(function ($) {
|
||||
$('#frame-box nav #nav_foto').on('click', function () {
|
||||
$('#frame-box #obrazy').hide()
|
||||
$('#frame-box #foto').show()
|
||||
$('#frame-box #plyty').hide()
|
||||
$('#frame-box #biogram').hide()
|
||||
})
|
||||
$('#frame-box nav #nav_plyty').on('click', function () {
|
||||
$('#frame-box #obrazy').hide()
|
||||
$('#frame-box #foto').hide()
|
||||
$('#frame-box #plyty').show()
|
||||
$('#frame-box #biogram').hide()
|
||||
})
|
||||
$('#frame-box nav #nav_intro').on('click', function () {
|
||||
$('#frame-box #obrazy').hide()
|
||||
$('#frame-box #intro').show()
|
||||
$('#frame-box #foto').hide()
|
||||
$('#frame-box #plyty').hide()
|
||||
@@ -120,19 +159,32 @@ jQuery(function ($) {
|
||||
})
|
||||
|
||||
$('#frame-box #intro p').on('click', function () {
|
||||
$('#frame-box #obrazy').hide()
|
||||
$('#frame-box #intro').hide()
|
||||
$('#frame-box #foto').hide()
|
||||
$('#frame-box #plyty').show()
|
||||
$('#frame-box #biogram').hide()
|
||||
|
||||
$('#frame-box nav#nav ul#nav_ul li').removeClass('active')
|
||||
$('#frame-box nav#nav ul#nav_ul li#nav_plyty').addClass('active')
|
||||
})
|
||||
|
||||
$('#frame-box nav #nav_biogram').on('click', function () {
|
||||
$('#frame-box #obrazy').hide()
|
||||
$('#frame-box #biogram').show()
|
||||
$('#frame-box #intro').hide()
|
||||
$('#frame-box #foto').hide()
|
||||
$('#frame-box #plyty').hide()
|
||||
})
|
||||
|
||||
$('#frame-box nav #nav_obrazy').on('click', function () {
|
||||
$('#frame-box #obrazy').show()
|
||||
$('#frame-box #biogram').hide()
|
||||
$('#frame-box #intro').hide()
|
||||
$('#frame-box #foto').hide()
|
||||
$('#frame-box #plyty').hide()
|
||||
})
|
||||
|
||||
$('#frame-box nav#nav ul#nav_ul li').on('click', function () {
|
||||
$('#frame-box nav#nav ul#nav_ul li').removeClass('active')
|
||||
$(this).addClass('active')
|
||||
@@ -144,10 +196,9 @@ jQuery(function ($) {
|
||||
$('.text-data', this).toggleClass('active')
|
||||
})
|
||||
})
|
||||
|
||||
jQuery(function ($) {
|
||||
Fancybox.bind('[data-fancybox]', {
|
||||
// Your custom options
|
||||
// Інші параметри за потреби
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
@@ -2172,4 +2172,139 @@ body.page-id-846 #content .page-content {
|
||||
}
|
||||
#biogram .swiper_biogram .swiper-pagination li.active {
|
||||
color: #f3180c;
|
||||
}
|
||||
|
||||
.helping .step-1 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 100%;
|
||||
}
|
||||
.helping .step-1 .step-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
.helping .step-1 .step-wrapper .step-icon {
|
||||
width: 50px;
|
||||
}
|
||||
.helping .step-1 .step-wrapper .step-icon img {
|
||||
width: 26px;
|
||||
min-width: 26px;
|
||||
height: 26px;
|
||||
transform: rotate(285deg);
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
.helping .step-1 .step-wrapper .step-text {
|
||||
padding: 10px;
|
||||
min-width: 125px;
|
||||
line-height: 1;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgb(0, 0, 0);
|
||||
}
|
||||
.helping .step-1 .step-wrapper .step-text span {
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
font-family: "Arial", sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
.helping .step-2 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.helping .step-2 .step-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
.helping .step-2 .step-wrapper .step-icon {
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
}
|
||||
.helping .step-2 .step-wrapper .step-icon img {
|
||||
width: 26px;
|
||||
min-width: 26px;
|
||||
height: 26px;
|
||||
transform: rotate(80deg);
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
.helping .step-2 .step-wrapper .step-text {
|
||||
padding: 10px;
|
||||
min-width: 140px;
|
||||
line-height: 1;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgb(0, 0, 0);
|
||||
}
|
||||
.helping .step-2 .step-wrapper .step-text span {
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
font-family: "Arial", sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
.helping .step-3 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
.helping .step-3 .step-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
}
|
||||
.helping .step-3 .step-wrapper .step-icon {
|
||||
width: 25px;
|
||||
min-width: 25px;
|
||||
}
|
||||
.helping .step-3 .step-wrapper .step-icon img {
|
||||
width: 26px;
|
||||
min-width: 26px;
|
||||
height: 26px;
|
||||
transform: rotate(80deg);
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
.helping .step-3 .step-wrapper .step-text {
|
||||
padding: 10px;
|
||||
min-width: 160px;
|
||||
line-height: 1;
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgb(0, 0, 0);
|
||||
}
|
||||
.helping .step-3 .step-wrapper .step-text span {
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-family: "Arial", sans-serif;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
#obrazy .obrazy-wrapper {
|
||||
overflow: auto;
|
||||
max-height: 347px;
|
||||
height: 347px;
|
||||
}
|
||||
#obrazy ul {
|
||||
padding: 40px 30px;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 20px;
|
||||
}
|
||||
#obrazy ul li img {
|
||||
width: 100%;
|
||||
max-width: -moz-fit-content;
|
||||
max-width: fit-content;
|
||||
aspect-ratio: 16/9;
|
||||
-o-object-fit: contain;
|
||||
object-fit: contain;
|
||||
}/*# sourceMappingURL=custom.css.map */
|
||||
File diff suppressed because one or more lines are too long
@@ -2703,3 +2703,164 @@ body {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.helping {
|
||||
.step {
|
||||
&-1 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 100%;
|
||||
|
||||
.step-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
|
||||
.step-icon {
|
||||
width: 50px;
|
||||
|
||||
img {
|
||||
width: 26px;
|
||||
min-width: 26px;
|
||||
height: 26px;
|
||||
transform: rotate(285deg);
|
||||
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
.step-text {
|
||||
padding: 10px;
|
||||
min-width: 125px;
|
||||
line-height: 1;
|
||||
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 1);
|
||||
|
||||
span {
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-2 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 100%;
|
||||
z-index: 1;
|
||||
|
||||
.step-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
|
||||
.step-icon {
|
||||
width: 40px;
|
||||
min-width: 40px;
|
||||
|
||||
img {
|
||||
width: 26px;
|
||||
min-width: 26px;
|
||||
height: 26px;
|
||||
transform: rotate(80deg);
|
||||
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
.step-text {
|
||||
padding: 10px;
|
||||
min-width: 140px;
|
||||
line-height: 1;
|
||||
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 1);
|
||||
|
||||
span {
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
font-family: 'Arial', sans-serif;
|
||||
font-weight: 700;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&-3 {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 100%;
|
||||
z-index: 1;
|
||||
|
||||
.step-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
gap: 10px;
|
||||
|
||||
.step-icon {
|
||||
width: 25px;
|
||||
min-width: 25px;
|
||||
|
||||
img {
|
||||
width: 26px;
|
||||
min-width: 26px;
|
||||
height: 26px;
|
||||
transform: rotate(80deg);
|
||||
|
||||
position: absolute;
|
||||
bottom: 10px;
|
||||
}
|
||||
}
|
||||
.step-text {
|
||||
padding: 10px;
|
||||
min-width: 160px;
|
||||
line-height: 1;
|
||||
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 1);
|
||||
|
||||
span {
|
||||
color: #000;
|
||||
font-size: 12px;
|
||||
font-weight: 700;
|
||||
font-family: 'Arial', sans-serif;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#obrazy {
|
||||
.obrazy-wrapper {
|
||||
overflow: auto;
|
||||
max-height: 347px;
|
||||
height: 347px;
|
||||
}
|
||||
ul {
|
||||
padding: 40px 30px;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
gap: 20px;
|
||||
|
||||
li {
|
||||
img {
|
||||
width: 100%;
|
||||
max-width: fit-content;
|
||||
aspect-ratio: 16/9;
|
||||
object-fit: contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -25,7 +25,7 @@
|
||||
<li id="nav_intro">
|
||||
<img src="/wp-content/uploads/2024/07/intro-1.png" alt="">
|
||||
</li>
|
||||
<li id="nav_plyty">
|
||||
<li id="nav_plyty" class="active">
|
||||
<img src="/wp-content/uploads/2024/07/plyty-1.png" alt="">
|
||||
</li>
|
||||
<li id="nav_foto">
|
||||
@@ -37,7 +37,7 @@
|
||||
<li id="nav_biogram">
|
||||
<img src="/wp-content/uploads/2024/07/biogram-1.png" alt="">
|
||||
</li>
|
||||
<li>
|
||||
<li id="nav_obrazy">
|
||||
<img src="/wp-content/uploads/2024/07/obrazy-1.png" alt="">
|
||||
</li>
|
||||
</ul>
|
||||
@@ -49,6 +49,19 @@
|
||||
<img class="song-hand" src="/wp-content/uploads/2024/04/342.png" alt="">
|
||||
<img class="song-line-1" src="/wp-content/uploads/2024/04/346.png" alt="">
|
||||
<img class="song-box" src="/wp-content/uploads/2024/04/1.png" alt="">
|
||||
|
||||
<div class="helping">
|
||||
<div class="step step-3">
|
||||
<div class="step-wrapper">
|
||||
<div class="step-text">
|
||||
<span>Kliknij w gramofon, aby włączyć lub wyłączyć muzyke</span>
|
||||
</div>
|
||||
<div class="step-icon">
|
||||
<img src="/wp-content/uploads/2025/05/Hand-Pointer-Icon.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="intro" style="display: none;">
|
||||
@@ -90,7 +103,10 @@
|
||||
<?php foreach (get_field('biogram') as $item) : ?>
|
||||
<div class="swiper-slide">
|
||||
<div class="slide-img">
|
||||
<img src="<?= $item['url']; ?>" alt="">
|
||||
<a href="<?= esc_url($item['url']); ?>" data-fancybox>
|
||||
<img src="<?= esc_url($item['url']); ?>" alt="">
|
||||
</a>
|
||||
<!-- <img src="<?= $item['url']; ?>" alt=""> -->
|
||||
</div>
|
||||
<div class="slide-text">
|
||||
<p><?= $item['description']; ?></p>
|
||||
@@ -109,6 +125,22 @@
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div id="obrazy" style="display: none;">
|
||||
<?php if (get_field('obrazy')) : ?>
|
||||
<div class="obrazy-wrapper">
|
||||
<ul>
|
||||
<?php foreach (get_field('obrazy') as $image) : ?>
|
||||
<li>
|
||||
<a href="<?php echo esc_url($image); ?>" data-fancybox>
|
||||
<img src="<?php echo esc_url($image); ?>" alt="">
|
||||
</a>
|
||||
</li>
|
||||
<?php endforeach; ?>
|
||||
</ul>
|
||||
</div>
|
||||
<?php endif; ?>
|
||||
</div>
|
||||
|
||||
<div id="book">
|
||||
<div class="book-actions">
|
||||
<div class="book-contents" style="display: none;">
|
||||
|
||||
@@ -32,11 +32,24 @@
|
||||
|
||||
|
||||
|
||||
<div class="img-box">
|
||||
<div class="img-box img-box-helping">
|
||||
<a href="<?= get_field("albums_arr")[0]['album_1_big']; ?>" data-fancybox>
|
||||
<img class="album" src="<?= get_field("albums_arr")[0]['album_1']; ?>" alt="">
|
||||
</a>
|
||||
<img class="album-record" src="/wp-content/uploads/2024/04/record.png" alt="">
|
||||
|
||||
<div class="helping">
|
||||
<div class="step step-2">
|
||||
<div class="step-wrapper">
|
||||
<div class="step-text">
|
||||
<span>Kliknij w płyte, aby powiększyć okładke</span>
|
||||
</div>
|
||||
<div class="step-icon">
|
||||
<img src="/wp-content/uploads/2025/05/Hand-Pointer-Icon.svg" alt="">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
|
||||
@@ -481,5 +481,18 @@
|
||||
<img class="hand-finder-part-1" src="/wp-content/uploads/2024/04/2-1.png" alt="">
|
||||
<img class="hand" src="/wp-content/uploads/2024/04/1-1.png" alt="">
|
||||
<!-- <img src="/wp-content/uploads/2024/04/finger.png" alt=""> -->
|
||||
|
||||
<div class="helping">
|
||||
<div class="step step-1">
|
||||
<div class="step-wrapper">
|
||||
<div class="step-icon">
|
||||
<img src="/wp-content/uploads/2025/05/Hand-Pointer-Icon.svg" alt="">
|
||||
</div>
|
||||
<div class="step-text">
|
||||
<span>Kliknij raczke i przesuwaj w prawo lub lewo aby nawigowac</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Reference in New Issue
Block a user