एनिमेटेड रोलओवर तीर एनीमेशन

Question

बनाने के लिए मैं कैसे https://www.plantflags.com/en/

यह वेबसाइटों बटन रोलओवर प्रभाव की तरह एक रोल ओवर बटन बनाना चाहते हैं। उदाहरण: यदि आप बटन पर रोलओवर करते हैं तो टेक्स्ट को फीका-आउट करना चाहिए और तीर को बाएं से आना चाहिए और बनाना चाहिए। रोल-आउट के बाद, तीर दाएं तरफ जाता है और फेड-आउट होता है और पाठ फिर से फीका होता है।

उदाहरण: यदि आप उस वेबसाइट पर जाते हैं और उस बटन को रोल-ओवर करते हैं, तो आप समझेंगे।

मैं अपने कोड का अध्ययन किया गया है, CSS मैं समझ सकता लेकिन देखते हैं एक जे एस मुद्दा जो मैं नहीं समझ सकता है।

क्या आप यह पता लगा सकते हैं कि मैं इसे इस प्रकार के रोलओवर प्रभाव की तरह कैसे बना सकता हूं।

वहाँ एचटीएमएल कोड की तरह

<a href="#" class="promo__button" data-module="modules/AnimatedArrowButton" data-contact-button>Tell me more</a> 

वहाँ

डेटा का श्रेय modules/AnimatedArrowButton वास्तव में js फोन और अधिक अवधि बनाने

प्रभाव https://jsfiddle.net/cyber007/78pshojd/

Answer 1

दर्ज स्विच करने के लिए/बाहर निकलें जावास्क्रिप्ट का उपयोग यहाँ मेरी पहली पास है। मैंने न्यूनतम मार्कअप को न्यूनतम रखने की कोशिश की; एकमात्र जोड़ पाठ को लपेटने वाला एक अवधि है। तीर pseudo elements के माध्यम से बनाया गया है। यह पूरी तरह से सजावटी है और मेरी राय में अन्य तत्वों से निर्मित होने पर अर्थपूर्ण नहीं होगा।

<a href="#" class="promo__button"> 
    <span>Tell me more</span> 
</a> 

https://jsfiddle.net/6ewvbq75/

मैं अपना सर्वश्रेष्ठ करने की कोशिश की कोड को साफ रखने के लिए और टिप्पणी की। कुछ महत्वपूर्ण बिट्स:

1. आप देखेंगे एनीमेशन के इस भाग का पृष्ठ से निभाता है। यह एक ज्ञात मुद्दा है, आप जो कर सकते हैं वह होवर पर एनीमेशन क्लास लागू कर सकता है। यह उतना ही अच्छा दिखता है लेकिन पेज लोड पर इन बटनों की अजीब एनीमेशन से बचाता है: https://jsfiddle.net/b5sc9xrp/

2. सभी एनिमेशन अंत में कीफ्रेम में संग्रहीत किए जाते हैं।on hover या on mouse over एनीमेशन को असाइनमेंट के साथ लागू किया गया है, उदाहरण के लिए .button:hover span निर्देश। on mouse out को मानक घोषणा .button span के भीतर असाइन किया गया है जो कि थोड़ा सा प्रतिद्वंद्वी है और इस प्रकार उल्लेखनीय है। सभी के बाद :un-hover नहीं है। एनीमेशन काम में

3. forwards कीवर्ड मतलब यह है कि एनीमेशन केवल आगे खेलते हैं और वहाँ बंद हो जाएगा। यह महत्वपूर्ण है। उदाहरण के लिए, जब हम टेक्स्ट को दाईं ओर स्लाइड करते हैं और इसे फीका करते हैं तो हम चाहते हैं कि यह अंतिम कीफ्रेम पर बने रहें। forwards के बिना एनीमेशन वापस keyframe पर कूद जाएगा 1.

4. मैंने तीर तत्वों को चौड़ाई में 2 पिक्सल बना दिया। मुझे लगता है कि यह 1px संस्करण से बेहतर और कम गड़बड़ दिखता है लेकिन यह एक आसान पर्याप्त समायोजन है।

यदि आपके कोई अन्य प्रश्न हैं तो मुझे बताएं। यह निर्माण करने के लिए एक मजेदार छोटा डेमो था।

Answer 2

बिना डेमो आप एक सरल उपाय चाहते हैं, मैं तो बस सीएसएस उपयोग करने का सुझाव transition, जावास्क्रिप्ट के साथ एक वर्ग को बदलने के अपवाद के साथ और बाहर लुप्त होने के लिए एक अलग एनीमेशन है।

.promo__button .message span { 
    //the css for the text when it is visible 
} 

.promo__button:hover .message span { 
    //the aditional css for the text when it is faded out 
} 

.promo__button .arrowleft span { 
    //the css for the arrow before it came in from the left (invisible) 
} 

.promo__button:hover .arrowleft span { 
    //the aditional css to make the arrow visible 
} 

.promo__button .arrowright span { 
    //the css for the arrow after it went away to the right side 
} 

.promo__button:hover .arrowright span { 
    //the aditional css to make the arrow visible 
} 

अब सभी मूल्यों कि सामान्य से बदल होवर करने के लिए

के लिए .promo__button * * { transition: left 0.2s, opacity, 0.2s} जोड़ें:

<a class="promo__button exit"> 
    <span class="arrowleft"> 
    <span>*the arrow that comes from the left*</span> 
    </span> 
    <span class="message"> 
    <span>*the text*</span> 
    </span> 
    <span class="arrowleft"> 
    <span>*the arrow that disappears to the right*</span> 
    </span> 
</a> 

तो सीएसएस में आप इन 6 चयनकर्ताओं हो सकता है:

निम्नलिखित संरचना ले लो अवांछित तीर एनीमेशन को छिपाने के लिए दो वर्गों का उपयोग करें:

.promo__button.enter .arrowright {display:none} 
.promo__button.exit .arrowleft {display:none} 

और onmouseenter

Answer 3

आप सीएसएस और jQuery मिश्रण इस प्रभाव को प्राप्त करने के लिए (जब से तुम jQuery के साथ अपने प्रश्न टैग किया गया) कर सकते हैं।

var timeout = null; 
 
var transitionEnd = true; 
 

 
jQuery('.line').on("mouseenter", function() { 
 
    if (!transitionEnd) 
 
    return; 
 

 
    _this = jQuery(this); 
 

 
    _this.addClass("hide-text"); 
 

 
    timeout = setTimeout(function() { 
 
    _this.addClass("in"); 
 
    }, 300); 
 

 
    transitionEnd = false; 
 
}).on("mouseleave", function() { 
 
    clearTimeout(timeout); 
 

 
    jQuery(this).addClass("out").one("transitionend", function() { 
 
    transitionEnd = true; 
 
    jQuery(this).removeClass("hide-text out in"); 
 
    }); 
 

 

 
});

.line { 
 
    background-color: red; 
 
    border: 1px solid; 
 
    border-radius: 5px; 
 
    color: white; 
 
    cursor: pointer; 
 
    display: block; 
 
    float: left; 
 
    font-size: 25px; 
 
    height: 70px; 
 
    line-height: 70px; 
 
    margin: 30px; 
 
    overflow: hidden; 
 
    position: relative; 
 
    text-align: center; 
 
    width: 200px; 
 
} 
 
.line::after { 
 
    content: " "; 
 
    border-top: 1px solid white; 
 
    position: absolute; 
 
    top: 50%; 
 
    right: 100%; 
 
    left: -150%; 
 
    transition: left 0.5s, right 0.3s; 
 
    opacity: 0; 
 
} 
 
.line::before { 
 
    border-right: 1px solid white; 
 
    border-top: 1px solid white; 
 
    content: " "; 
 
    height: 10px; 
 
    position: absolute; 
 
    right: 20%; 
 
    top: calc(50% - 5px); 
 
    transform: rotate(45deg) scale(0.2); 
 
    transition: all 0.5s ease 0s; 
 
    width: 10px; 
 
    opacity: 0; 
 
} 
 
.line span, 
 
.line.out span { 
 
    opacity: 1; 
 
    transition: 0.5s; 
 
    transition-delay: 0.1s; 
 
} 
 
.line.hide-text span { 
 
    opacity: 0; 
 
} 
 
.line.in::after { 
 
    left: 20%; 
 
    right: 20%; 
 
    opacity: 1; 
 
} 
 
.line.in::before { 
 
    transform: rotate(45deg) scale(1); 
 
    opacity: 1; 
 
} 
 
.line.out::before { 
 
    right: -100%; 
 
    transition-delay: 0s; 
 
} 
 
.line.out::after { 
 
    left: 100%; 
 
    right: -150%; 
 
    transition: left 0.3s, right 0.3s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class='line'> 
 
    <span class='text'>Button Text</span> 
 
</div>

Answer 4

मैं सकारात्मक हूँ बटन जावास्क्रिप्ट की आवश्यकता नहीं है।

यहां केवल HTML और सीएसएस में उच्च स्तरीय ढांचा है: https://jsfiddle.net/gsvcaLrt/1/

button { 
 
    background-color: red; 
 
    border: none; 
 
    padding: 1rem; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.arrow { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    position: absolute; 
 
    transform: translateX(-30px); 
 
    transition: 0.4s; 
 
} 
 
button:hover .arrow { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transform: translateX(0px); 
 
} 
 

 
.text { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transition: 0.4s; 
 
    display: inline-block; 
 
} 
 
/* hide button on hover */ 
 
button:hover .text { 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transform: translateX(30px); 
 
}

<button> 
 
    <span class="arrow">--></span> 
 
    <span class="text">Hello</span> 
 
</button>

आप सीएसएस के साथ एनीमेशन अनुक्रम के विभिन्न भागों में और अधिक विस्तार से जोड़ सकते हैं।

Answer 5

मैं जानता हूँ कि यह बहुत देर हो चुकी है, लेकिन यह दिलचस्प हो सकता है। छद्म वर्गों का उपयोग करने से पहले मैंने & के बाद सीएसएस केवल एनीमेशन का उपयोग किया है।

body { 
 
    font-family: "Helvetica Neue", sans-serif; 
 
    background: #f8f8f8; 
 
} 
 

 
.promo { 
 
    color: #fff; 
 
    text-align: center; 
 
} 
 

 
.promo__button { 
 
    border: 1px solid #fff; 
 
    display: inline-block; 
 
    position: relative; 
 
    margin-top: 1.5em; 
 
    font-size: 24px; 
 
    padding: 20px 50px; 
 
    text-decoration: none; 
 
    text-transform: uppercase; 
 
    font-weight: 700; 
 
    line-height: 1; 
 
    letter-spacing: .025em; 
 
    text-align: center; 
 
    color: #fff; 
 
    background: #E21710; 
 
    overflow: hidden; 
 
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); 
 
    
 
} 
 

 
.promo__button:after { 
 
    content: ''; 
 
    position: absolute; 
 
    display: block; 
 
    left: 0; 
 
    top: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: #fff; 
 
    transform: scaleY(0); 
 
    transform-origin: bottom; 
 
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); 
 
} 
 

 
.text { 
 
    transform: matrix(1, 0, 0, 1, 0, 0); 
 
    display: block; 
 
    transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1); 
 
} 
 

 
.arrow { 
 
    position: absolute; 
 
    top: 50%; 
 
    transform: translate(-300%, -50%); 
 
    width: 80px; 
 
    height: 1px; 
 
    background: #E21710; 
 
    display: inline-block; 
 
    z-index: 1; 
 
    visibility: hidden; 
 
    opacity: 0; 
 
    transition: all 0.5s cubic-bezier(0.77, 0, 0.175, 1); 
 
} 
 

 
.arrow:after, 
 
.arrow:before { 
 
    content: ''; 
 
    position: absolute; 
 
    right: -3px; 
 
    display: block; 
 
    width: 20px; 
 
    height: 1px; 
 
    background: #E21710; 
 
    z-index: 2; 
 
} 
 

 
.arrow:after { 
 
    top: 7px; 
 
    transform: rotate(-45deg); 
 
} 
 

 
.arrow:before { 
 
    transform: rotate(45deg); 
 
    top: -7px; 
 
} 
 

 
.promo__button:hover .text { 
 
    transform: translateX(200%); 
 
} 
 

 
.promo__button:hover .arrow { 
 
    visibility: visible; 
 
    opacity: 1; 
 
    transform: translate(-50%, -50%); 
 
} 
 
.promo__button:hover { 
 
\t box-shadow: 0 0 37px 10px rgba(0, 0, 0, 0.02); 
 
} 
 
.promo__button:hover:after { 
 
    transform: scaleY(1); 
 
}

<div class="promo"> 
 
    <a href="#" class="promo__button" data-module="modules/AnimatedArrowButton" data-contact-button> 
 
\t \t \t <span class="text">Tell me more</span> 
 
\t \t \t <span class="arrow"></span> 
 
    </a> 
 

 
</div>

।