বাম উত্তরণ থেকে সিএসএস 3 স্লাইড-ইন

Question

কেবলমাত্র CSS এর সাথে স্লাইড-ইন ট্রানজিশন তৈরির জন্য কোনও ক্রস ব্রাউজার সমাধান রয়েছে, কোনও জাভাস্ক্রিপ্ট নেই? নীচে এইচটিএমএল সামগ্রীর উদাহরণ রয়েছে:

<div>
    <img id="slide" src="http://.../img.jpg />
</div>

Answer 1

কোনও উপাদানটিতে স্লাইড করতে আপনি CSS3 স্থানান্তর বা CSS3 অ্যানিমেশন ব্যবহার করতে পারেন।

ব্রাউজার সহায়তার জন্য: http://caniuse.com/

আমি কী বোঝাতে চাইছি তা দেখানোর জন্য আমি দুটি দ্রুত উদাহরণ তৈরি করেছি।

সিএসএস রূপান্তর (হোভারে)

ডেমো ওয়ান

প্রাসঙ্গিক কোড

.wrapper:hover #slide {
    transition: 1s;
    left: 0;
}

এই ক্ষেত্রে, দর্শন লগ করা ঠিক অবস্থান থেকে রূপান্তরের left: -100px;জন্য 0;একটি 1s সঙ্গে। সময়কাল। এটি ব্যবহার করে উপাদানটি সরানোও সম্ভবtransform: translate();

সিএসএস অ্যানিমেশন

ডেমো টু

#slide {
    position: absolute;
    left: -100px;
    width: 100px;
    height: 100px;
    background: blue;
    -webkit-animation: slide 0.5s forwards;
    -webkit-animation-delay: 2s;
    animation: slide 0.5s forwards;
    animation-delay: 2s;
}

@-webkit-keyframes slide {
    100% { left: 0; }
}

@keyframes slide {
    100% { left: 0; }
}

উপরের মতো একই নীতি (ডেমো ওয়ান), তবে অ্যানিমেশনটি 2 সের পরে স্বয়ংক্রিয়ভাবে শুরু হয় এবং এই ক্ষেত্রে আমি সেট animation-fill-modeকরে রেখেছি forwards, যা এনিমেশন শেষ হওয়ার পরে ডিভ দৃশ্যমান রেখে শেষ প্রান্তে স্থির থাকবে।

আমি যেমন বলেছি, এটি কীভাবে সম্ভব হতে পারে তা দেখানোর জন্য দুটি দ্রুত উদাহরণ।

সম্পাদনা: সিএসএস অ্যানিমেশন এবং ট্রানজিশন সম্পর্কিত বিশদের জন্য দেখুন:

অ্যানিমেশন

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

স্থানান্তর

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transitions

আশা করি এটি সাহায্য করেছে।

Answer 2

transformপারফরম্যান্স সমস্যাগুলি (মোবাইল) এড়াতে CSS3 2D ব্যবহার করুন

একটি সাধারণ সমস্যা হ'ল ব্যবহারের পরিবর্তে left/ top/ right/ bottomবৈশিষ্ট্যগুলি অ্যানিমেট করাCSS-রুপান্তরএকই প্রভাব অর্জন করতে। বিভিন্ন কারণে, রূপান্তরগুলির শব্দার্থকগুলি তাদের অফলোডকে আরও সহজ করে তোলে, তবে left/ top/ right/ bottomআরও অনেক কঠিন।

সূত্র: মজিলা বিকাশকারী নেটওয়ার্ক (এমডিএন)

---

ডেমো:

var $slider = document.getElementById('slider');
var $toggle = document.getElementById('toggle');

$toggle.addEventListener('click', function() {
    var isOpen = $slider.classList.contains('slide-in');

    $slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
});

#slider {
    position: absolute;
    width: 100px;
    height: 100px;
    background: blue;
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}

.slide-in {
    animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

.slide-out {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}
    
@keyframes slide-in {
    100% { transform: translateX(0%); }
}

@-webkit-keyframes slide-in {
    100% { -webkit-transform: translateX(0%); }
}
    
@keyframes slide-out {
    0% { transform: translateX(0%); }
    100% { transform: translateX(-100%); }
}

@-webkit-keyframes slide-out {
    0% { -webkit-transform: translateX(0%); }
    100% { -webkit-transform: translateX(-100%); }
}

<div id="slider" class="slide-in">
    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
    </ul>
</div>

<button id="toggle" style="position:absolute; top: 120px;">Toggle</button>

Answer 3

অ্যানিমেশন এবং কীফ্রেম ব্যবহার না করে সিএসএস ট্রান্সফর্ম (মোবাইলগুলিতে পারফরম্যান্সের উদ্দেশ্যে, @ ম্যাট 64 এর উত্তর দেখুন) ব্যবহার করে এখানে আরও একটি সমাধান দেওয়া হয়েছে।

আমি দু'পাশ থেকে স্লাইড-ইন করতে দুটি সংস্করণ তৈরি করেছি।

$('#toggle').click(function() {
  $('.slide-in').toggleClass('show');
});

.slide-in {
  z-index: 10; /* to position it in front of the other content */
  position: absolute;
  overflow: hidden; /* to prevent scrollbar appearing */
}

.slide-in.from-left {
  left: 0;
}

.slide-in.from-right {
  right: 0;
}

.slide-in-content {
  padding: 5px 20px;
  background: #eee;
  transition: transform .5s ease; /* our nice transition */
}

.slide-in.from-left .slide-in-content {
  transform: translateX(-100%);
  -webkit-transform: translateX(-100%);
}

.slide-in.from-right .slide-in-content {
  transform: translateX(100%);
  -webkit-transform: translateX(100%);
}

.slide-in.show .slide-in-content {
  transform: translateX(0);
  -webkit-transform: translateX(0);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slide-in from-left">
  <div class="slide-in-content">
    <ul>
      <li>Lorem</li>
      <li>Ipsum</li>
      <li>Dolor</li>
    </ul>
  </div>
</div>

<div class="slide-in from-right">
  <div class="slide-in-content">
    <ul>
      <li>One</li>
      <li>Two</li>
      <li>Three</li>
    </ul>
  </div>
</div>

<button id="toggle" style="position:absolute; top: 120px;">Toggle</button>

Answer 4

ডানদিকে স্লাইডিংয়ের জন্য এটি ব্যবহার করুন:

এইচটিএমএল:

   <div class="nav ">
       <ul>
        <li><a href="#">HOME</a></li>
        <li><a href="#">ABOUT</a></li>
        <li><a href="#">SERVICES</a></li>
        <li><a href="#">CONTACT</a></li>
       </ul>
   </div>

সিএসএস:

/*nav*/
.nav{
    position: fixed;
    right:0;
    top: 70px;
    width: 250px;
    height: calc(100vh - 70px);
    background-color: #333;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;

}
.nav-view{
    transform: translateX(0);
}
.nav ul{
    margin: 0;
    padding: 0;
}
.nav ul li{
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.nav ul li a{
    color: #fff;
    display: block;
    padding: 10px;
    border-bottom: solid 1px rgba(255,255,255,0.4);
    text-decoration: none;
}

জাতীয়:

  $(document).ready(function(){
  $('a#click-a').click(function(){
    $('.nav').toggleClass('nav-view');
  });
});

Answer 5

আমি @ mate64 এর উত্তর পছন্দ করেছি তাই আমি নীচে একটি স্লাইড তৈরি করতে এবং নীচে অ্যানিমেশনগুলি সামান্য পরিবর্তন করে পুনরায় ব্যবহার করতে যাচ্ছি:

var $slider = document.getElementById('slider');
var $toggle = document.getElementById('toggle');

$toggle.addEventListener('click', function() {
    var isOpen = $slider.classList.contains('slide-in');

    $slider.setAttribute('class', isOpen ? 'slide-out' : 'slide-in');
});

#slider {
    position: absolute;
    width: 100px;
    height: 100px;
    background: blue;
    transform: translateY(-100%);
    -webkit-transform: translateY(-100%);
}

.slide-in {
    animation: slide-in 0.5s forwards;
    -webkit-animation: slide-in 0.5s forwards;
}

.slide-out {
    animation: slide-out 0.5s forwards;
    -webkit-animation: slide-out 0.5s forwards;
}
    
@keyframes slide-in {
    100% { transform: translateY(0%); }
}

@-webkit-keyframes slide-in {
    100% { -webkit-transform: translateY(0%); }
}
    
@keyframes slide-out {
    0% { transform: translateY(0%); }
    100% { transform: translateY(-100%); }
}

@-webkit-keyframes slide-out {
    0% { -webkit-transform: translateY(0%); }
    100% { -webkit-transform: translateY(-100%); }
}

<div id="slider" class="slide-in">
    <ul>
        <li>Lorem</li>
        <li>Ipsum</li>
        <li>Dolor</li>
    </ul>
</div>

<button id="toggle" style="position:absolute; top: 120px;">Toggle</button>