0
私はホバーに魚眼レンズ効果を作成するためにフォントサイズを拡大しようとしています。遷移にフォントサイズを大きくするためにCSSを使用しCSSのフォントサイズスケーリングジッター
は、ジッタ効果を引き起こします。スケール変換を用いた
は、テキストの左側が少しスケールアップする前に左に上を移動する望ましくない効果を作成します。
2つの効果を並べて表示するためにペンを作成しました。理想的には、私はこれを達成するための権利
https://codepen.io/sygad1/pen/QMWqXy
任意のアイデアの滑らかさと、左への影響をみたいですか？ 2番目の例では
乾杯
HTML
<ul class="fish-eye-text-size">
<li>Font size scaling</li>
<li>Menu item one</li>
<li>Menu item two</li>
<li>Menu item three</li>
<li>Menu item four</li>
<li>Menu item five</li>
<li>Menu item six</li>
<li>Menu item seven</li>
<li>Menu item eight</li>
<li>Menu item nine</li>
<li>Menu item ten</li>
</ul>
<ul class="fish-eye-scaling">
<li>CSS scaling</li>
<li>Menu item one</li>
<li>Menu item two</li>
<li>Menu item three</li>
<li>Menu item four</li>
<li>Menu item five</li>
<li>Menu item six</li>
<li>Menu item seven</li>
<li>Menu item eight</li>
<li>Menu item nine</li>
<li>Menu item ten</li>
</ul>
SCSS
//Text size
.mediumText {
font-size:1.4rem;
}
.largeText {
font-size:1.7rem;
}
// CSS Scaling
.mediumScale {
transform: scale(1.3);
transform-origin: 0% 50%;
}
.largeScale {
transform: scale(1.5);
transform-origin: 0% 50%;
}
ul {
margin:0 auto;
padding:0;
list-style:none;
width:250px;
overflow:hidden;
float:left;
margin:20px;
background:#e1e1e1;
li {
cursor: pointer;
transition:all 0.4s;
height:30px;
position:relative;
padding:10px;
will-change: transform;
}
}
JS
// Font size
$(".fish-eye-text-size li").on("mouseenter", function() {
$(this).addClass("largeText");
$(this).next().addClass("mediumText");
$(this).prev().addClass("mediumText");
});
$(".fish-eye-text-size li").on("mouseleave", function() {
$(this).removeClass("largeText");
$(this).next().removeClass("mediumText");
$(this).prev().removeClass("mediumText");
});
// CSS Scaling
$(".fish-eye-scaling li").on("mouseenter", function() {
$(this).addClass("largeScale");
$(this).next().addClass("mediumScale");
$(this).prev().addClass("mediumScale");
});
$(".fish-eye-scaling li").on("mouseleave", function() {
$(this).removeClass("largeScale");
$(this).next().removeClass("mediumScale");
$(this).prev().removeClass("mediumScale");
});