Bootstrap Floating Social Icon with CSS Animation

모두들 매일 수업료를 다시받을 수 있습니다 이 자습서에서는이 떠 다니는 사교적 인 아이콘을 만드는 방법을 빠르게 알아 봅니다

아이콘 위로 마우스 커서를 이동하면 소셜 미디어의 이름이 표시됩니다 그래서 우리가 늦게 오기 전에 시작하자 이제 코드 편집기에서 프로젝트 폴더를 열고 두 개의 파일을 만듭니다 Indexhtml 및 style

css indexhtml에서 우리는 간단한 html5를 생성 할 것입니다 짧은 발췌 그런 다음 부트 스트랩 프레임 워크와 jquery js 파일을 연결합니다 그런 다음 글꼴 멋진 아이콘 cdn을 연결하십시오

마지막으로 stylecss 파일을 연결합니다 라이브 서버에서이 파일을 엽니 다 따라서 빠른 결과를 얻을 수 있습니다 본문에서는 부트 스트랩 컨테이너 클래스를 생성합니다

그리고 그 안에 버튼 클래스를 넣으십시오 버튼 클래스에서 navbar-nav 부트 스트랩 클래스로 ul 태그를 만듭니다 ul 태그에서 li 태그에 nav-link 클래스를 추가합니다 그리고 그 안에 앵커 태그를 만듭니다 앵커 태그에서 아이콘 클래스로 span 태그를 만들고 생성 할 코드를 삽입합니다

트위터 아이콘 그 후에 우리는 그것을 다시 복사하여 붙여넣고 더 많은 사교적 인 아이콘을 만듭니다 instagram, linkedin 및 pinterest와 같습니다 stylecss에서 우리는 그것을위한 스타일을 만들 것입니다

body 태그의 스타일을 만들고 여백과 패딩을 제거하십시오 배경색을 지정하십시오 그런 다음 버튼 클래스를 만들고 여백 위쪽을 추가하고 높이를 지정하고 남은 여백을 추가하십시오 그런 다음 탐색 링크 클래스를 만듭니다 모든 아이콘에 대해 위쪽 및 아래쪽 여백을 삽입합니다

그리고 상대적인 위치를 설정하십시오 이 속성을 사용하여 요소의 z- 인덱스를 지정합니다 그런 다음 첫 번째 li 태그 인 첫 번째 nav-link 하위 클래스를 만듭니다 그리고 마진 상단 20px를 추가하십시오 navbar-nav 클래스의 배경색을 지정하면이 속성이 도움이 될 것입니다

그냥 제거하십시오 그런 다음 아이콘 클래스를 만들고 배경색을 지정하고 패딩을 추가하고 색상을 지정하십시오 아이콘에 그런 다음 글꼴 크기를 늘리고 테두리 반경을 지정하십시오 꼭지점과 왼쪽 아래에 다른 속성을 지정합니다

상단 – 하단에는 20px를 지정하고 왼쪽 – 오른쪽에는 10px를 지정합니다 이 반지름을 변경할 수 있습니다 그런 다음 position 속성 relative를 지정하고 z-index 4를 추가합니다 마지막에는 부드러운 애니메이션을위한 transition 속성을 지정하십시오 그 후에 우리는 첫번째 아이에게 배경색과 색을 지정할 것입니다

코드를 복사하여 다시 붙여 넣기 만하면됩니다 다른 아이도 배경색과 색상 속성을 지정하십시오 이제 indexhtml 파일로 돌아가 아이콘 텍스트 클래스로 span 태그를 삽입하십시오 이 범위에는 소셜 미디어 이름이 표시됩니다

그래서 우리는 모든 사회적 아이콘을 위해 이것을 만들 것입니다 이제이 아이콘 텍스트 클래스에 대한 CSS 속성을 만듭니다 그래서 우리는 위치 절대 값과 왼쪽 및 위 속성을 지정합니다 그런 다음 z- 인덱스 너비를 추가하여 패딩 및 테두리 반경 및 색상 및 오버 플로우 숨김을 지정합니다 재산

애니메이션의 경우 전환 속성을 지정합니다 그런 다음 첫 번째 nav 링크 자식에 대한 아이콘 텍스트 클래스를 만듭니다 트위터 아이콘이었고 배경색을 지정했다고 생각합니다 다시 복사하여 붙여넣고 두 번째 자식에 대한 배경색을 지정하십시오 이를 더 잘 이해하기 위해 position, left, top 및 width 속성을 제거합니다

걱정하지 말고 다시 돌려 보겠습니다 아이콘 텍스트 세 번째와 네 번째 자식을 만듭니다 이제 다시 놓을 것이지만 너비 속성에 작은 변화가있을 것입니다 아이콘 텍스트의 너비는 0px로 지정합니다 우리는 아이콘 텍스트 클래스에 왜 0px를 넣어야하는지 후자에게 알려줄 것입니다

이제 mainjs 파일을 만들고이 파일을 indexhtml에 연결하십시오 이 파일에서 우리는이 소셜 아이콘을 움직이기위한 jquery 코드를 생성 할 것입니다 먼저 document

ready 함수를 생성합니다 이 함수에서는 변수 호출 버튼을 만들고 buttons를 지정합니다 nav-link nth 자식 텍스트 그런 다음 첫 번째 자식 위로 마우스를 가져 가면 버튼이 삽입됩니다

변수 추가 더하기 부호 하위 번호와 아이콘 클래스를 지정하십시오 전체 텍스트를 반복해서 타이핑하는 것을 제외하고는이 텍스트를 변수에 넣기 만하면됩니다 그것을 문자열로 사용하십시오 이 기술은 시간을 절약 해줍니다 그 후 호버 이벤트 첫 번째 함수에서 두 개의 함수를 만들려면 호버 인과 두 번째입니다 떠돌아 다니기위한 것입니다

첫 번째 함수에서이 키워드로 첫 번째 자식 아이콘에 대해 CSS 속성을 지정하십시오 경계 반경 30px 및 20px 및 10px 패딩을 지정합니다 여기서는 첫 번째 자식 아이콘 클래스의 CSS 속성 값을 변경합니다 그리고 hover out 함수에서 css 속성을 default로 변경합니다 이제 아이콘을 가리키면 모양이 바뀝니다

이제 우리는 아이콘 텍스트 클래스의 CSS 값을 변경하고 있습니다 그래서 폭 130px와 여백 6px와 39px를 지정합니다 이렇게하면 놀라운 호버 효과가 생성됩니다 여기서 한 일은 이미 아이콘 텍스트 클래스에 대해 0px 너비를 지정하는 것입니다 이제 너비를 130px로 늘립니다

오른쪽 붕괴 효과를 볼 수 있습니다 호버 아웃 기능에서 아이콘 텍스트의 너비와 채우기를 기본값으로 제거하십시오 이렇게하면 뜨는 사회적 아이콘에 대한 놀라운 호버 효과가 생성됩니다 이 아이콘의 나머지 부분에 대해이 효과를 만듭니다 따라서이 코드를 복사하여 다시 붙여넣고 자식 번호를 변경하십시오

그거야 떠 다니는 소셜 아이콘을 사용할 준비가되었습니다 동영상 댓글 섹션에 나에게 의견을 말하기보다는 질문이 있으시면 유용하다고 판단되면이 비디오를 좋아하고 공유하십시오 이 채널을 구독하고 벨 아이콘을 누르면 모든 새로운 비디오를 알립니다 그것은 오늘을위한 전부입니다

다음 튜토리얼에서 보자 그 때까지 행복하게 지켜봐주십시오