Toggle Element With Smooth CSS3 Transitions

slide-element

A Promise-based, jQuery-reminiscent collection of functions to help hide and show elements in a sliding fashion.

Under the Hood

This library relies on CSS animations to perform the transitions, but doesn’t require elements to have fixed heights. Instead, element heights are calculated based on their contents and padding (if applicable), and then the appropriate values are then applied to trigger a native transition. In all, slide-element comes in at under 1kb gzipped.

Installation

npm install slide-element

Setup

Make sure your target element is set to display: none, whether that’s with a class or inline style.

Usage

Toggling Elements

Use the toggle function to slide an element open & closed based on its current state.

import { toggle } from "slide-element";

document.getElementById("button").addEventListener("click", (e) => {
  toggle(document.getElementById("box"));
});

Sliding Elements Down

Use the down function to slide an element open.

import { down } from "slide-element";

down(document.getElementById("boxToSlideOpen"));

Sliding Elements Up

Use the up function to slide an element closed, and then set its display property to none.

import { up } from "slide-element";

up(document.getElementById("boxToSlideClosed"));

Everything’s a Promise

Each of the functions provided return promises, so you can easily wait to perform an action after an animation is complete. The resolved value will be a boolean indicating if the element has just been opened (true) or closed (false).

import { toggle } from "slide-element";

toggle(document.getElementById("someElement")).then((opened) => {
  console.log("toggling is done!");
});

Customizing the Animation

Each function accepts an object to control how the sliding animation executes. You can set your own duration and timingFunction values.

import { up } from "slide-element";

const anElement = document.getElementById("anElement");

up(anElement, { duration: 0.5, timingFunction: "linear" });

Options

Option Type Description Default
duration number The speed of the transition in seconds. .25
timingFunction string The CSS timing function used to define the style of transition. ease

Usage w/o a Bundler

If you’d like to use slide-element directly in the browser via CDN, simply load the code, and then reference the function you’d like to use on the global SlideElement object:

<script src="./dist/slide-element.min.js"></script>
<script>
  document.getElementById('someElement').addEventListener('click', (e) => {
    SlideElement.toggle(document.getElementById('someBox'));
});
</script>

API

toggle(node[, options]), up(node[, options]), down(node[, options]),

Param Type Description
node Node A single HTML node to be slid open or closed
options object Options to customize sliding animation.

Contributions

Go for it. Just send a PR.

Download Details:

Author: alexmacarthur

Demo: https://alexmacarthur.github.io/slide-element/

Source Code: https://github.com/alexmacarthur/slide-element

#css #css3 #javascript

What is GEEK

Buddha Community

Toggle Element With Smooth CSS3 Transitions

Toggle Element With Smooth CSS3 Transitions

slide-element

A Promise-based, jQuery-reminiscent collection of functions to help hide and show elements in a sliding fashion.

Under the Hood

This library relies on CSS animations to perform the transitions, but doesn’t require elements to have fixed heights. Instead, element heights are calculated based on their contents and padding (if applicable), and then the appropriate values are then applied to trigger a native transition. In all, slide-element comes in at under 1kb gzipped.

Installation

npm install slide-element

Setup

Make sure your target element is set to display: none, whether that’s with a class or inline style.

Usage

Toggling Elements

Use the toggle function to slide an element open & closed based on its current state.

import { toggle } from "slide-element";

document.getElementById("button").addEventListener("click", (e) => {
  toggle(document.getElementById("box"));
});

Sliding Elements Down

Use the down function to slide an element open.

import { down } from "slide-element";

down(document.getElementById("boxToSlideOpen"));

Sliding Elements Up

Use the up function to slide an element closed, and then set its display property to none.

import { up } from "slide-element";

up(document.getElementById("boxToSlideClosed"));

Everything’s a Promise

Each of the functions provided return promises, so you can easily wait to perform an action after an animation is complete. The resolved value will be a boolean indicating if the element has just been opened (true) or closed (false).

import { toggle } from "slide-element";

toggle(document.getElementById("someElement")).then((opened) => {
  console.log("toggling is done!");
});

Customizing the Animation

Each function accepts an object to control how the sliding animation executes. You can set your own duration and timingFunction values.

import { up } from "slide-element";

const anElement = document.getElementById("anElement");

up(anElement, { duration: 0.5, timingFunction: "linear" });

Options

Option Type Description Default
duration number The speed of the transition in seconds. .25
timingFunction string The CSS timing function used to define the style of transition. ease

Usage w/o a Bundler

If you’d like to use slide-element directly in the browser via CDN, simply load the code, and then reference the function you’d like to use on the global SlideElement object:

<script src="./dist/slide-element.min.js"></script>
<script>
  document.getElementById('someElement').addEventListener('click', (e) => {
    SlideElement.toggle(document.getElementById('someBox'));
});
</script>

API

toggle(node[, options]), up(node[, options]), down(node[, options]),

Param Type Description
node Node A single HTML node to be slid open or closed
options object Options to customize sliding animation.

Contributions

Go for it. Just send a PR.

Download Details:

Author: alexmacarthur

Demo: https://alexmacarthur.github.io/slide-element/

Source Code: https://github.com/alexmacarthur/slide-element

#css #css3 #javascript

野村  陽一

野村 陽一

1638056820

Javascriptでのダーク&ライトモードの切り替え

ダークテーマは、ウェブサイトのデザインの最も重要な側面の1つです。これは、過去数年間のトレンド機能です。これの主な理由の1つは、特にそれほど照らされていないスペースで、高輝度による目の負担を避け、安全性を提供することです。

今日のチュートリアルでは、ダークモードスイッチを作成する方法を学習します。ユーザーがこのスイッチをクリックすると、Webページ/ Webサイトのテーマがダークモードとライトモードの間で切り替わります。このチュートリアルでは、コードを大幅に変更したり、CSSを過剰に追加したりせずに、ダークテーマオプションをWebサイトに追加する方法の基本的な考え方を理解できます。

UIデザインのダークテーマに関しては、すべきこととすべきでないことがいくつかあります。このチュートリアルでは、それらについて簡単に説明します。このチュートリアルでは、HTML、CSS、VanillaJavascriptが必要です。私たちが使用するJavaScriptコードはそれほど複雑ではないので、心配する必要はありません。それでは、チュートリアルを始めましょう。

HTML:

HTMLファイルを作成し、「index.html」という名前で保存します。以下に提供するコードをコピーして、HTMLファイルに貼り付けてください。
HTMLには多くの要素が含まれていません。クラス名「container」で「div」要素を作成しましょう。コンテナはチェックボックスを閉じます。このチェックボックスには、「toggle」という名前のIDを割り当てます。ここでチェックボックスを使用する理由は、スタイルを設定してトグルスイッチとして使用するためです。
次に、HTMLにデモテキストを追加する必要があります。この目的のために、いくつかの「loremipsum」テキストを追加しています。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Dark Mode Toggle</title>
    <!--Google Fonts-->
    <link href="https://fonts.googleapis.com/css2?family=Work+Sans&display=swap" rel="stylesheet">
    <!--Stylesheet-->
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <input type="checkbox" id="toggle">
    </div>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis, ab sequi! Ipsum, reprehenderit! Dolor vero sunt corporis ea natus, nulla cum assumenda. Nostrum corporis molestiae corrupti magni. Corporis ducimus ipsam, qui et eveniet nisi excepturi sint dolore, labore velit repellat quia quasi! Repellendus quo magni voluptatem aut odit, totam sequi autem, doloremque minima tenetur placeat debitis reiciendis repudiandae dolore tempore adipisci blanditiis reprehenderit doloribus recusandae esse commodi harum ratione quisquam?
    </p>
    <script src="script.js"></script>
</body>
</html>

CSS:

スタイルシートを作成し、「style.css」という名前を付けます。次に、以下のコードをコピーして、スタイルシートに貼り付けます。

まず、ボディにパディングを追加します。次に、幅を追加し、コンテナを中央に配置します。チェックボックスをトグルスイッチのようにスタイル設定するには、疑似要素の「後」に配置します。「後」の疑似要素は、太陽を表す円のように見えます。

暗いテーマのクラスにスタイルを追加する必要があります。このクラスは、ユーザーがトグルをクリックしたときに本体に適用されます。

ダークテーマでは、背景色は「#15181f」に設定されます。灰色またはより暗い灰色の色合いを使用します。黒の使用は避けてください。全体的に黒い色は眼精疲労を引き起こす可能性があります。グレーの濃い色合いがより適しています。フォントの色については、彩度の低いバージョンの白を選択します。
 

暗闇の中で、テーマのスイッチの背景色が白に変わります(または彩度の低いバージョンの白を使用できます)。'after'疑似要素は、box-shadowプロパティを使用して月のように見えるように作成されます。

*,
*:before,
*:after{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    padding: 30px;
}
.container{
    width: 100%;
    height: 40px;
    position: relative;
    margin-bottom: 30px;
}
#toggle{
    -webkit-appearance: none;
    appearance: none;
    height: 40px;
    width: 75px;
    background-color: #15181f;
    position: absolute;
    right: 0;
    border-radius: 20px;
    outline: none;
    cursor: pointer;
}
#toggle:after{
    content: "";
    position: absolute;
    height: 30px;
    width: 30px;
    background-color: #ffffff;
    top: 5px;
    left: 7px;
    border-radius: 50%;
}
p{
    font-family: "Open Sans",sans-serif;
    line-height: 35px;
    text-align: justify;
}
.dark-theme{
    background-color: #15181f;
    color: #e5e5e5;
}
.dark-theme #toggle{
    background-color: #ffffff;
}
.dark-theme #toggle:after{
    background-color: transparent;
    box-shadow: 10px 10px #15181f;
    top: -4px;
    left: 30px;
}

Javascript:

最後のステップとして、このトグルを機能させるための機能を追加する必要があります。'script.js'というJavaScriptファイルを作成します。ここに記載されているコードをコピーして、スクリプトファイルに貼り付けます。

javascriptで行う唯一のことは、「クリック」イベントリスナーをトグルに追加することです。クリックイベントでは、ドキュメント本文で「ダークテーマ」クラスが切り替えられます。このようにして、ユーザーがスイッチをクリックすると、ダークモードが追加および削除されます。

document.getElementById("toggle").addEventListener("click", function(){
    document.getElementsByTagName('body')[0].classList.toggle("dark-theme");
});

これでダークモードスイッチの準備が整いました。これは、Webページにダークモードを追加する方法の1つを紹介する小さな例ですが、先に進んでこれを展開し、Webサイト全体にダークモードを追加できます。このチュートリアルが気に入ったら、必ず私のYouTubeチャンネルをチェックしください次のチュートリアルでお会いしましょう。


リンク: https://codingartistweb.com/2021/07/dark-light-mode-toggle-javascript/

#javascript 

 

Ethan Hughes

Ethan Hughes

1600950540

Toggle Element With Smooth CSS3 Transitions

slide-element

A Promise-based, jQuery-reminiscent collection of functions to help hide and show elements in a sliding fashion.

Under the Hood

This library relies on CSS animations to perform the transitions, but doesn’t require elements to have fixed heights. Instead, element heights are calculated based on their contents and padding (if applicable), and then the appropriate values are then applied to trigger a native transition. In all, slide-element comes in at under 1kb gzipped.

Installation

npm install slide-element

Setup

Make sure your target element is set to display: none, whether that’s with a class or inline style.

Usage

Toggling Elements

Use the toggle function to slide an element open & closed based on its current state.

import { toggle } from "slide-element";

document.getElementById("button").addEventListener("click", (e) => {
  toggle(document.getElementById("box"));
});

Sliding Elements Down

Use the down function to slide an element open.

import { down } from "slide-element";

down(document.getElementById("boxToSlideOpen"));

Sliding Elements Up

Use the up function to slide an element closed, and then set its display property to none.

import { up } from "slide-element";

up(document.getElementById("boxToSlideClosed"));

Everything’s a Promise

Each of the functions provided return promises, so you can easily wait to perform an action after an animation is complete:

import { toggle } from "slide-element";

toggle(document.getElementById("someElement")).then(() => {
  console.log("toggling is done!");
});

Customizing the Animation

Each function accepts an object to control how the sliding animation executes. You can set your own duration and timingFunction values.

import { up } from "slide-element";

const anElement = document.getElementById("anElement");

up(anElement, { duration: 0.5, timingFunction: "linear" });

Options

Option Type Description Default
duration number The speed of the transition in seconds. .25
timingFunction string The CSS timing function used to define the style of transition. ease

Usage w/o a Bundler

If you’d like to use slide-element directly in the browser via CDN, simply load the code, and then reference the function you’d like to use on the global SlideElement object:

<script src="./dist/slide-element.min.js"></script>
<script>
  document.getElementById('someElement').addEventListener('click', (e) => {
    SlideElement.toggle(document.getElementById('someBox'));
});
</script>

API

toggle(node[, options]), up(node[, options]), down(node[, options]),

Param Type Description
node Node A single HTML node to be slid open or closed
options object Options to customize sliding animation.

Contributions

Go for it. Just send a PR.

Download Details:

Author: alexmacarthur

Demo: https://alexmacarthur.github.io/slide-element/

Source Code: https://github.com/alexmacarthur/slide-element

#javascript #css

Janis  Smitham

Janis Smitham

1626756780

What Goes inside The Body Element? - Introduction and Learn HTML5 and CSS3.

Want to learn HTML5 and CSS3 from scratch?

This is the 14th episode of my “Learn HTML5 and CSS3” course. In this course, we will learn everything about how we can create markup for a website. At the end of the course, I will add some full tutorials where I will be creating famous websites from scratch. So, if you have any suggestions, just let me know and I might make a video about it!

In this episode, I want to quickly go over all the elements and structure of the body element. This is a pretty important episode because from now on, we will start creating actual websites!

#css3 #html5 #inside the body element?

Janis  Smitham

Janis Smitham

1626775140

Introduction to CSS3 Grid - Crash Course - Introduction and Learn HTML5 and CSS3

Want to learn HTML5 and CSS3 from scratch?

This is the 19th episode of my “Learn HTML5 and CSS3” course. In this course, we will learn everything about how we can create markup for a website. At the end of the course, I will add some full tutorials where I will be creating famous websites from scratch. So, if you have any suggestions, just let me know and I might make a video about it!

Since we are living in a multi-screen society, it’s important for your site to be viewable across as many devices as possible, because you never know what device someone will be using to view your website.

CSS grid defines a two-dimensional grid-based layout system, optimized for user interface design. In the grid layout model, the children of a grid container can be positioned into arbitrary slots in a predefined flexible or fixed-size layout grid.

Grid Layout gives us a method of creating grid structures that are described in CSS and not in HTML. It helps us to create layouts that can be redefined using Media Queries and adapt to different contexts.

#css3 #html5 #css3 grid