Выдвижение блока с текстом без искажений
При рендеринге видно как текcт подстраивается под анимацию при выезде блока, немного искажается (возможно что только в Firefox).
https://jsfiddle.net/jurvrn/b7um102r/2/ Можно ли переделать CSS на JavaScript или JQuery чтобы искажения при анимации пропали? |
Цитата:
|
рони,
Очевидно это заметно в "настольном" firefox. Это можно описать как бледный текст становится темнее по окончании transition |
jurvrn,
не могу увидеть ... но попробуйте сбросить стили ... добавить в самое начало <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/reseter.css/1.1.2/reseter.min.css'> |
рони,
Попробую, Вы если замедлите, то возможно артефакт будет виднее |
рони,
не помогло, вот видеоскрин сделал - этот артефакт видно (как буквы темнеют) https://vimeo.com/547455193 если что на сайте можно глянуть - jurvrn.ru |
jurvrn,
transition: all 0.3s ease-in-out; замените на transform |
|
jurvrn,
:-? transition: transform 0.3s ease-in-out; |
Цитата:
спасибо, но я бы хотел переделать на JQuery - можно? просто slideUp/slideDown знаю, а slideLeft/slideRight вроде такого нет |
Цитата:
https://api.jqueryui.com/slide-effect/ |
рони,
сделал как понял, так как мануал короткий, и работает не так как надо ( https://jsfiddle.net/jurvrn/oqpktewn/14/ ещё пример сделал https://jsfiddle.net/jurvrn/oqpktewn/23/ и нашел вот это, это уже анимация https://www.tutorialrepublic.com/cod...d-right-effect Но мне нужен такой эффект как уже у меня есть. То есть на hover закрепить слайд. Ну и чтобы срабатывал toggle когда hover пропадал |
slideRight jquery
jurvrn,
без jquery-ui
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#toggle {
position: absolute;
width: 100px;
height: 100px;
background: #ccc;
left: calc(100% - 100px);
overflow: hidden;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
let direction = 0;
$(document).click(function() {
direction ^= 1;
let options = direction ? {
width: "-=100px",
left: "+=100px"
} : {
width: "+=100px",
left: "-=100px"
}
$("#toggle").stop().animate(
options, {
duration: 1200,
complete: function() {
this.style.left = direction ? "100%" : "";
}
});
});
});
</script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle">toggle slideRight</div>
</body>
</html>
|
рони,
кончно понимаю Цитата:
Попытался заставить блок вылезать справа не получилось у меня. Просьба убрать блок за границу экрана справа и чтобы он выплывал влево |
Цитата:
|
мысли вслух:
если можно использовать css, то лучше использовать css, чем js и тем более jquery. |
Цитата:
Вы видели искажения, может JS/JQuery отработается по другому вот ещё вроде хороший код но не могу заставить его работать https://codepen.io/intersk/pen/YzZwyYj или https://codepen.io/intersk/pen/KKWVzQb |
Цитата:
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#toggle {
position: absolute;
width: 0px;
height: 100px;
background: #ccc;
left: 100%;
overflow: hidden;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
let direction = 1;
$(document).click(function() {
direction ^= 1;
let options = direction ? {
width: "-=100px",
left: "+=100px"
} : {
width: "+=100px",
left: "-=100px"
}
$("#toggle").stop().animate(
options, {
duration: 1200,
complete: function() {
this.style.left = direction ? "" : "calc(100% - 100px)";
}
});
});
});
</script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div id="toggle">toggle slideRight</div>
</body>
</html>
|
рони, спасибо, это то что надо! а как-то упростить, ускорить этот скрипт можно? а то смотрю там вычисления... Или не так понял?
И где там настраивается ширина выезжающего блока? Тем более что планируется она по ширине текста, текст разный, а блоков этих будет несколько (типа меню). Поэтому я не могу всем указать одинаковую ширину... |
Цитата:
|
jurvrn,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
body{
position: relative;
}
.toggle {
position: absolute;
width: 0px;
height: 100px;
background-color: #ccc;
left: calc(100% - var(--left, 0px));
overflow: hidden;
top: 0;
}
.toggle.two {
top: 120px;
background-color: #008000;
}
.toggle > div{
position: relative;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(function() {
let direction = 1;
$(document).click(function() {
direction ^= 1;
$(".toggle").stop().each((i, el) => {
let width = el.dataset.width;
let options = direction ? {
width: `-=${width}`,
left: `+=${width}`
} : {
width: `+=${width}`,
left: `-=${width}`
};
$(el).animate(
options, {
duration: 800,
complete: function() {
this.style.setProperty("--left", direction ? "0px" : `${width}`);
this.style.left = ''
}
});
})
});
});
</script>
</head>
<body>
<p>Click anywhere to toggle the box.</p>
<div class="toggle" data-width="300px"><div style="width:300px">toggle slideRight</div></div>
<div class="toggle two" data-width="100px"><div style="width:100px">toggle slideRight test test</div></div>
</body>
</html>
|
Цитата:
|
рони,
Скрипт попробую и напишу. Неужели он нагружает страницу больше чем css? |
Цитата:
|
рони,
Пока до компьютера не добрался, чтобы попробовать скрипт. Вы его еще больше усложнили ) Пусть нагружает больше , мне сейчас важнее убрать артефакт искажения. Посмотрю как скрипт отработает на моем браузере. В вашем способе нужно задавать ширину изначально точно. Мне бы хотелось чтобы ширина высчиталась динамично, в зависимости от контента. Может в таком случае нужно margin'ами оперировать? |
Цитата:
Цитата:
|
Цитата:
.main-block {
z-index: 1;
position: fixed;
width: 36px;
height: 175px;
top: 0;
bottom: 0;
margin: auto 0;
}
.each-block {
position: relative;
z-index: 2;
display: flex;
margin-bottom: 10px;
}
.iconka-block, .textLine-Out {
height: 36px;
border: black 2px solid;
border-radius: 5px 0 0 5px;
}
.textLine-Out {
z-index: 3;
position: static;
display: flex;
background-color: rgb(213, 231, 248);
-webkit-transition: transform 0.3s ease-in-out;
-moz-transition: transform 0.3s ease-in-out;
-o-transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
.textLine-Iner {
margin: auto;
font-size: 16px;
white-space: nowrap;
padding: 0 10px;
}
.iconka-block {
position: absolute;
display: flex;
z-index: 4;
background-color: rgb(226,226,226);
width: 36px;
right: 0;
cursor: pointer;
border-right: none;
}
.iconka-block:hover + .textLine-Out {
-webkit-transform: translateX(calc(-100% + 4px));
-moz-transform: translateX(calc(-100% + 4px));
-ms-transform: translateX(calc(-100% + 4px));
-o-transform: translateX(calc(-100% + 4px));
transform: translateX(calc(-100% + 4px));
}
.iconka-block .icon_all {
font-size: 22px;
text-align: center;
margin: auto;
}
<div class="main-block">
<div class="each-block">
<div class="iconka-block"><i class="fa fa-envelope-o icon_all icon_mail" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">Напишите нам</div></div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-podcast icon_all icon_111_enter" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">fa2-podcast 2icon</div></div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-bookmark-o icon_all icon_111_enter" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">33icon_fa-bookmark-o</div></div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-user-circle icon_all icon_enter" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">Вход на сайт</div></div>
</div>
</div>
|
меню справа на css
jurvrn,
оставьте всё как есть, артефакт, если у кого-то и проявится, незаметен. js тут ничего не исправит, и будет только лишним.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.main-block {
z-index: 1;
position: fixed;
width: 36px;
height: 175px;
top: 0;
bottom: 0;
margin: auto 0;
left: calc(100% - 36px);
}
.each-block {
position: relative;
z-index: 2;
display: flex;
margin-bottom: 10px;
}
.iconka-block, .textLine-Out {
height: 36px;
border: black 2px solid;
border-radius: 5px 0 0 5px;
}
.textLine-Out {
z-index: 3;
position: static;
display: flex;
background-color: rgb(213, 231, 248);
-webkit-transition: transform 0.3s ease-in-out;
-moz-transition: transform 0.3s ease-in-out;
-o-transition: transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
-webkit-transform: translateX(0%);
-moz-transform: translateX(0%);
-ms-transform: translateX(0%);
-o-transform: translateX(0%);
transform: translateX(0%);
}
.textLine-Iner {
margin: auto;
font-size: 16px;
white-space: nowrap;
padding: 0 10px;
}
.iconka-block {
position: absolute;
display: flex;
z-index: 4;
background-color: rgb(226,226,226);
width: 36px;
right: 0;
cursor: pointer;
border-right: none;
}
.iconka-block:hover + .textLine-Out, .textLine-Out:hover {
-webkit-transform: translateX(calc(-100% + 4px));
-moz-transform: translateX(calc(-100% + 4px));
-ms-transform: translateX(calc(-100% + 4px));
-o-transform: translateX(calc(-100% + 4px));
transform: translateX(calc(-100% + 4px));
}
.iconka-block .icon_all {
font-size: 22px;
text-align: center;
margin: auto;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
});
</script>
</head>
<body>
<div class="main-block">
<div class="each-block">
<div class="iconka-block"><i class="fa fa-envelope-o icon_all icon_mail" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">Напишите нам</div></div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-podcast icon_all icon_111_enter" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">fa2-podcast 2icon</div></div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-bookmark-o icon_all icon_111_enter" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">33icon_fa-bookmark-o</div></div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-user-circle icon_all icon_enter" aria-hidden="true"></i></div>
<div class="textLine-Out"><div class="textLine-Iner">Вход на сайт</div></div>
</div>
</div>
</body>
</html>
|
рони,
в вашем посте №21 нет такого артефакта, потому то выдвижение реализуется как-то под другому. Вот к этому и стремлюсь. Вот в этих кодах можно что-то исправить чтобы было как мне нужно? У самого не получается заставить их работать https://codepen.io/intersk/pen/YzZwyYj https://codepen.io/intersk/pen/KKWVzQb |
jurvrn,
https://codepen.io/intersk/pen/YzZwyYj отсутствует jquery-ui https://codepen.io/intersk/pen/KKWVzQb отсутствует # |
меню справа на jquery
jurvrn,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.main-block {
z-index: 1;
position: fixed;
width: 36px;
height: 175px;
top: 0;
bottom: 0;
margin: auto 0;
left: calc(100% - 36px);
}
.each-block {
position: relative;
z-index: 2;
display: flex;
margin-bottom: 10px;
}
.iconka-block,
.textLine-Out {
height: 36px;
border: black 2px solid;
border-radius: 5px 0 0 5px;
}
.textLine-Out {
z-index: 3;
position: static;
display: flex;
background-color: rgb(213, 231, 248);
}
.textLine-Iner {
margin: auto;
font-size: 16px;
white-space: nowrap;
}
.iconka-block {
position: absolute;
display: flex;
z-index: 4;
background-color: rgb(226, 226, 226);
width: 36px;
right: 0;
cursor: pointer;
border-right: none;
}
.textLine-Out {
transform: translateX(calc(-100% + 36px));
}
.textLine-Iner {
width: 0px;
padding: 0 10px;
}
.iconka-block .icon_all {
font-size: 22px;
text-align: center;
margin: auto;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(function() {
$(".each-block").each((i, el) => {
let textLine = el.querySelector(".textLine-Iner");
let width = el.scrollWidth + 10;
$(el).mouseenter(function() {
let options = {
width: `${width}px`,
};
$(textLine).stop().animate(
options, {
duration: 600
})
})
$(el).mouseleave(function() {
let options = {
width: `0px`
};
$(textLine).stop().animate(
options, {
duration: 300
});
})
})
});
</script>
</head>
<body>
<div class="main-block">
<div class="each-block">
<div class="iconka-block"><i class="fa fa-envelope-o icon_all icon_mail" aria-hidden="true"></i></div>
<div class="textLine-Out">
<div class="textLine-Iner">Напишите нам</div>
</div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-podcast icon_all icon_111_enter" aria-hidden="true"></i></div>
<div class="textLine-Out">
<div class="textLine-Iner">fa2-podcast 2icon</div>
</div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-bookmark-o icon_all icon_111_enter" aria-hidden="true"></i></div>
<div class="textLine-Out">
<div class="textLine-Iner">33icon_fa-bookmark-o</div>
</div>
</div>
<div class="each-block">
<div class="iconka-block"><i class="fa fa-user-circle icon_all icon_enter" aria-hidden="true"></i></div>
<div class="textLine-Out">
<div class="textLine-Iner">Вход на сайт</div>
</div>
</div>
</div>
</body>
</html>
|
Цитата:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> во втором скрипте что-то тоже не получается когда нужно использовать несколько блоков (не писать же под каждый свой скрипт) я просто убрал из класса стилей transform: translateX(0%); и искажение прекратилось при сохранении работы кода... эта тема решена |
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 08:17. |