{"draftJsState":{"blocks":[{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Привет! Сегодня покажу, как сделать интересный эффект наведения для меню (ну или для любого другого текста). Получилось весьма интересно, данный эффект у меня и на блоге, и на сайте. Смотрим!","type":"unstyled","key":"13to8"},{"data":{"image":{"id":"5cb9a96185567b00af092268"}},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"atomic:image","key":"dsq5i"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":9,"offset":163,"style":"BOLD"}],"text":" \nЭтот красивый hover-эффект я сам где-то нашел и он мне весьма понравился. Теперь же хочу научить ему Вас. В целом, все несложно и работает через псевдоэлемент и overflow. ","type":"unstyled","key":"al9v2"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Разметка","type":"header-two","key":"ciqc"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"2m395"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":1,"style":"BOLD"},{"length":3,"offset":28,"style":"BOLD"},{"length":2,"offset":68,"style":"BOLD"},{"length":2,"offset":81,"style":"BOLD"},{"length":1,"offset":85,"style":"BOLD"},{"length":4,"offset":97,"style":"BOLD"},{"length":4,"offset":125,"style":"BOLD"},{"length":1,"offset":136,"style":"BOLD"},{"length":2,"offset":140,"style":"BOLD"},{"length":2,"offset":153,"style":"BOLD"},{"length":1,"offset":157,"style":"BOLD"},{"length":4,"offset":169,"style":"BOLD"},{"length":4,"offset":199,"style":"BOLD"},{"length":1,"offset":216,"style":"BOLD"},{"length":2,"offset":220,"style":"BOLD"},{"length":2,"offset":233,"style":"BOLD"},{"length":1,"offset":237,"style":"BOLD"},{"length":4,"offset":249,"style":"BOLD"},{"length":4,"offset":272,"style":"BOLD"},{"length":1,"offset":282,"style":"BOLD"},{"length":2,"offset":286,"style":"BOLD"},{"length":2,"offset":299,"style":"BOLD"},{"length":1,"offset":303,"style":"BOLD"},{"length":4,"offset":315,"style":"BOLD"},{"length":4,"offset":340,"style":"BOLD"},{"length":1,"offset":352,"style":"BOLD"},{"length":2,"offset":356,"style":"BOLD"},{"length":2,"offset":369,"style":"BOLD"},{"length":1,"offset":373,"style":"BOLD"},{"length":4,"offset":385,"style":"BOLD"},{"length":4,"offset":412,"style":"BOLD"},{"length":1,"offset":426,"style":"BOLD"},{"length":2,"offset":430,"style":"BOLD"},{"length":2,"offset":442,"style":"BOLD"},{"length":3,"offset":461,"style":"BOLD"},{"length":3,"offset":468,"style":"BOLD"}],"text":"

\n \n

","type":"blockquote","key":"cf29e"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"Собственно, простой html-код. Единственное что важно — у span внутри ссылки есть дата-атрибут data-text. Он должен совпадать с текстом внутри самой ссылки.","type":"unstyled","key":"fi4pv"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":310,"offset":0,"style":"BOLD"}],"text":" Прим.: Возможен баг при наведении, с которым я сам когда-то столкнулся на другом сайте. Может неверно отрабатывать ховер, если у вас есть слова с пробелом в этих ссылках. В таком случае внутри дата-атрибута должно быть «текст текст». Т.е. вместо пробела ставим символ nbsp. И не забудьте точку с запятой) ","type":"blockquote","key":"8omsj"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":3,"offset":0,"style":"BOLD"}],"text":"CSS","type":"header-two","key":"ag3di"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" ","type":"unstyled","key":"601ku"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":8,"offset":6,"style":"BOLD"},{"length":7,"offset":28,"style":"BOLD"},{"length":8,"offset":53,"style":"BOLD"},{"length":9,"offset":73,"style":"BOLD"},{"length":5,"offset":94,"style":"BOLD"},{"length":8,"offset":201,"style":"BOLD"},{"length":4,"offset":225,"style":"BOLD"},{"length":7,"offset":238,"style":"BOLD"},{"length":8,"offset":258,"style":"BOLD"},{"length":5,"offset":280,"style":"BOLD"},{"length":6,"offset":294,"style":"BOLD"},{"length":9,"offset":312,"style":"BOLD"},{"length":16,"offset":335,"style":"BOLD"},{"length":5,"offset":411,"style":"BOLD"},{"length":7,"offset":446,"style":"BOLD"},{"length":8,"offset":478,"style":"BOLD"},{"length":5,"offset":504,"style":"BOLD"},{"length":7,"offset":520,"style":"BOLD"},{"length":5,"offset":542,"style":"BOLD"},{"length":5,"offset":561,"style":"BOLD"},{"length":5,"offset":656,"style":"BOLD"},{"length":5,"offset":687,"style":"BOLD"}],"text":"a {\n position: relative;\n display: inline-block;\n overflow: hidden;\n font-size: vh(80);\n color: $color-white;\n opacity: 0;\n transform: translateY(-10px);\n transition: all 0.6s;\n \n span {\n position: absolute;\n left: 0;\n display: block;\n overflow: hidden;\n width: 0;\n height: 100%;\n font-size: vh(80);\n background-color: #111517;\n backface-visibility: hidden;\n transition: width .3s;\n \n &::before {\n content: attr(data-text);\n position: absolute;\n right: 0;\n display: block;\n width: 100%;\n color: $color-red;\n backface-visibility: hidden;\n }\n }\n \n &:hover {\n span {\n width: 100%;\n transition: width 0.3s;\n }\n }\n}","type":"blockquote","key":"ff0d6"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[{"length":16,"offset":144,"style":"BOLD"},{"length":4,"offset":196,"style":"BOLD"},{"length":24,"offset":251,"style":"BOLD"},{"length":10,"offset":434,"style":"BOLD"}],"text":" Я пожалуй опущу тут остальные стили, только самые нужные покажу. Остальное увидите в конце статьи в codepen. Что тут собственно важно, так это overflow: hidden у ссылки и работа псевдоэлемента у span. Обратите внимание, в качестве контента указываем content: attr(data-text), это как раз таки «вызов» данных прямо из дата-атрибута. Ну и работает все по довольно простой логике — ширина span меняется с нуля до 100% плавно, благодаря transition. Вот собственно и все) ","type":"unstyled","key":"c4ieh"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" И собственно сам codepen: ","type":"unstyled","key":"8q0ms"},{"data":{},"depth":0,"entityRanges":[{"key":0,"length":38,"offset":1}],"inlineStyleRanges":[],"text":" https://codepen.io/MaxGraph/pen/zXKerg ","type":"unstyled","key":"1gape"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"58gbd"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"d1igk"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":" Надеюсь, Вам был полезен данный прием, и Вы сумеете его использовать где-нибудь на Ваших проектах. Это был первый выпуск CSS Magic, дальше будет только интереснее) Подписывайтесь на блог и удачи Вам! ","type":"unstyled","key":"cl3r9"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"unstyled","key":"8pi4k"},{"data":{},"depth":0,"entityRanges":[{"key":1,"length":25,"offset":7}],"inlineStyleRanges":[],"text":"Блог: https://blog.maxgraph.ru/ ","type":"unstyled","key":"e89ko"},{"data":{},"depth":0,"entityRanges":[],"inlineStyleRanges":[],"text":"","type":"marker","key":"bjqAj5pIL0dpK5l2oQwQ"}],"entityMap":{"0":{"data":{"href":"https://codepen.io/MaxGraph/pen/zXKerg","url":"https://codepen.io/MaxGraph/pen/zXKerg"},"mutability":"MUTABLE","type":"LINK"},"1":{"data":{"href":"https://blog.maxgraph.ru/","url":"https://blog.maxgraph.ru/"},"mutability":"MUTABLE","type":"LINK"}}},"mentions":[]}